КампутарыПраграмаванне

Прымяненне CSS па цэнтры: тэкст і табліца

Інфармацыйны свет у любым яго набліжэнні прадстаўлены элементамі і сістэмамі элементаў, словамі і тэкстамі, або ў апошняй фармалізаванай інстанцыі - тэкстамі і табліцамі. Можна разглядаць і іншыя, ужо вядомыя, структуры дадзеных, а таксама малюнкі, але да пытанняў выкарыстання CSS і HTML у частцы фарматавання тэксту астатнія інфармацыйныя формы маюць іншае стаўленне.

Правільная структура старонкі сайта мяркуе азначэнне становішча кожнага элемента. HTML-дакумент заўсёды - паслядоўнасць элементаў, на адлюстраванне якой прама ўплываюць тры асноўныя правілы:

  • абсалютная пазіцыянаванне (position);
  • месца ў агульным патоку;
  • z-index.

Іншыя варыянты размяшчэння таксама маюць значэнне, патрабуюць вялікіх ведаў для вырашэння задачы сродкамі CSS "па цэнтры тэкст".

Центрируемое і правілы выраўноўвання

Правілы CSS дапаўняюць HTML-дакумент, але і без правілаў апошні можа ўправіцца з любым варыянтам выраўноўвання. Паўсюднае распаўсюджванне мабільных прылад і догляд дызайну ў бок большай прастаты і «прастакутныя» робіць пытанне цэнтравання актуальным, у той час як іншае выраўноўванне часта губляе значэнне.

Асноўны элемент старонкі - блок, апісаны канкрэтны стыль. Правіла гарызантальнага выраўноўвання: text-align можа прымаць, як ужо склалася, толькі чатыры значэння (left, center, right, justify). Можна выканаць вертыкальнае выраўноўванне, камбінуючы значэння правілаў height і line-height:

{
height: 88px; // пры такіх суадносінах
line-height: 88px; // css па цэнтры тэкст - вертыкальна
}

Можна эксперыментаваць з іншымі правіламі. ; У крыніцах сустракаецца згадка пра інтэрпрэтацыю блока правіламі display: table, display: table-cell і vertical-align: middle; але не заўсёды гэта працуе.

Выраўноўванне тэксту з дапамогай табліц

Адзіная структура дадзеных, якой наканавана было быць зразуметай першай і жыць вечна, - табліца. Тут прадугледжана і вертыкальнае, і гарызантальнае выраўноўванне, акрамя таго, пытанне таго, як размясціць тэкст па цэнтры ў CSS, пры выкарыстанні табліц перастае мець складанае значэнне.

Якая склалася практыка выкарыстання правілаў CSS для дасягнення той ці іншай мэты ў разметцы далёка не заўсёды задавальняе канцэпцыі каскадных табліц стыляў. Нішто не перашкаджае распрацоўніку выканаць цэнтраванне ў любым кірунку, змясціўшы кантэнт у цэнтральнае вочка табліцы з трох калонак і трох радкоў.

Дадзенае рашэнне не стандартна, але дзейсна. Замест таго каб доўга і скрупулёзна вырашаць праблему кроссбраузерности старонкі або разлічваць водступы злева, справа і інш., Можна банальна скарыстацца ў адсотках Шырын вочак і вышынь шэрагаў у табліцах.

Выраўноўванне з дапамогай JavaScript

Пытанне "Як размясціць тэкст па цэнтры ў HTML" элементарна вырашаецца алгарытмам на мове браўзэра і мае значна больш практычнае і эфектнае выкананне.

Праектаванне файлаў стыляў ўжо выйшла на паток, і практычна кожная якая паважае сябе сістэма кіравання сайтамі прапануе распрацоўшчыкам наборы стыляў на ўсе выпадкі жыцця. Але жыццё патрабуе заўсёды канкрэтыкі: даводзіцца кожны раз з чыстага ліста думаць, як жа гэта сродкамі CSS па цэнтры тэкст размясціць. Варыянт для мэтаў выраўноўвання ў блоку, "прылепленым" да баку старонкі, а таму мяняючым памер, наўрад ці падыдзе блоку ўсплываючае меню, якое пабудавана з розных элементаў.

Бачнае цэнтраванне - гэта не заўсёды проста блок, у якім першапачаткова вядома, дзе левы бок і колькі пікселяў да правай, дзе верх, і не гарантыя, што ніз - гэта тая мяжа, адносна якой належыць выканаць вертыкальнае выраўноўванне.

Складваецца тэндэнцыя, што стыль павінен вызначацца кантэнтам. У большай ступені сайты нясуць наведвальніку інфармацыю, візуальнае і гукавое суправаджэнне - толькі дадатак да звычайнага тэксту. Менавіта знакі нясуць патрэбны кантэнт (гэта не тычыцца сайтаў па мастацтве, карцінам, музыцы і г.д.) - ідзе гаворка аб неабходнай наведвальніку інфармацыі.

Асаблівасці прадстаўлення тэксту і HTML

Склалася так, што непадзельны элемент кантэнту старонкі - тэкст, а не слова. Семантыка - гэта кампетэнцыя распрацоўніка (уладальніка сайта). Уласна тэкст можа быць прадстаўлены не адным тэгам, то ёсць натуральнае прапанова можа ўяўляць сабой не проста паслядоўнасць знакаў, а паслядоўнасць тэгаў, якія змяшчаюць сімвалы. З гэтага вынікае, што "сама" CSS "па цэнтры тэкст" можа размясціць толькі ў простых выпадках.

Выдача сервера па запыце браўзэра вельмі аб'ёмная і ўтрымлівае мноства элементаў, далёка не заўсёды адносяцца да таго, што будзе адлюстравана. Пры праектаванні разметкі старонкі важна правільна размясціць акцэнты ў частцы прадстаўлення інфармацыі, у прыватнасці, выраўноўвання. Што-то лепш рабіць на сэрвэры, што-то на кліенце, гэта значыць у браўзэры. Не заўсёды варта разлічваць на правілы CSS, арыентацыя на канчатковы вынік значна больш практычным.

Similar articles

 

 

 

 

Trending Now

 

 

 

 

Newest

Copyright © 2018 be.atomiyme.com. Theme powered by WordPress.