Выраўноўванне па цэнтры: CSS-вёрстка

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

Выраўноўванне тэксту па цэнтры

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

• text-align: center;

Гэта ўласцівасць успадкоўваецца і перадаецца ад аднаго з бацькоў ўсім нашчадкам. Ўплывае не толькі на тэкст, але і на іншыя элементы. Для гэтага яны павінны быць малымі (напрыклад, span) або малымі-блокавымі (любыя блокі, якім зададзена ўласцівасць display: block). Апошні варыянт дазваляе таксама змяняць шырыню і вышыню элемента, больш гнутка наладжваць водступы.

Часта на старонках align прыпісваюць да самога тэгу. Гэта адразу робіць код Неваліднасьць, так як W3C прызнаў атрыбут align састарэлым. Выкарыстанне яго на старонцы не рэкамендуецца.

Выраўноўванне блока па цэнтры

Калі трэба задаць выраўноўванне div па цэнтры, CSS можа прапанаваць даволі зручны спосаб: выкарыстанне знешніх водступаў margin. Водступы можна задаваць як блокавых элементаў, так і малыя-блокавым. Значэнне свойсва павінна прымаць значэння 0 (водступы па вертыкалі) і auto (аўтаматычныя водступы па гарызанталі):

• margin: 0 auto;

Зараз менавіта гэты варыянт прызнаны абсалютна валідным. Выкарыстанне знешніх водступаў таксама дазваляе задаць выраўноўванне карцінкі па цэнтры: CSS-ўласцівасць margin дазваляе вырашаць шмат праблем, звязаных з пазіцыянаваннем элемента на старонцы.

Выраўноўванне блока па левым ці правым краі

Часам выраўноўванне па цэнтры CSS-спосабам не патрабуецца, затое трэба паставіць два блокі побач: адзін з левага краю, другі - з правага. Для гэтага існуе ўласцівасць float, якое можа прымаць адно з трох значэнняў: left, right або none. Дапусцім, у вас ёсць два блокі, якія трэба паставіць побач. Тады код будзе такім:

• .left {float: left;}
• .right {float: right}

Калі ёсць яшчэ і трэці блок, які павінен размяшчацца пад першымі двума блокамі (напрыклад, футер), то яму неабходна прапісаць ўласцівасць clear:

• .left {float: left;}
• .right {float: right}
• footer {clear: both}

Справа ў тым, што блокі з класамі left і right выпадаюць з агульнага патоку, то ёсць усе астатнія элементы ігнаруюць само існаванне выравненные элементаў. Ўласцівасць clear: both дазваляе футеру ці адным зь іншых блоку бачыць выпалі з патоку элементы і забараняе обцяканьне (float) як злева, так і справа. Таму ў нашым прыкладзе футер зрушыцца ўніз.

вертыкальнае выраўноўванне

Бываюць выпадкі, калі недастаткова задаць выраўноўванне па цэнтры CSS-спосабамі, неабходна яшчэ змяніць вертыкальнае становішча даччынага блока. Любы малой або малымі-блокавы элемент можа быць прыціснуты да верхняга або ніжняга краю, знаходзіцца пасярэдзіне бацькоўскага элемента або знаходзіцца ў адвольным месцы. Часцей за ўсё патрабуецца выраўноўванне блока па цэнтры, для гэтага выкарыстоўваецца атрыбут vertical-align. Дапусцім, ёсць два блокі, адзін укладзены ў іншы. Пры гэтым унутраны блок - малымі-блокавы элемент (display: inline-block). Неабходна выраўнаваць блок child па вертыкалі:

• выраўноўванне па верхняй мяжы - .child {vertical-align: top};
• выраўноўванне па цэнтры - .child {vertical-align: middle};
• выраўноўванне па ніжняй мяжы - .child {vertical-align: bottom};

На блокавыя элементы ні text-align, ні vertical-align не дзейнічаюць.

Магчымыя праблемы з Выраўнаваны блокамі

Часам выраўноўванне div па цэнтры CSS-спосабам можа выклікаць невялікія праблемы. Напрыклад, пры выкарыстанні float: дапусцім, ёсць тры блокі: .first, .second і .third. Другі і трэці блокі ляжаць у першым. Элемент з класам second выраўнаваны па левым краі, а апошні блок - па правым. Пасля выраўноўвання абодва выпалі з патоку. Калі бацька мае зададзенай вышыні (напрыклад, 30em), то ён перастане расцягвацца па вышыні даччыных блокаў. Каб пазбегнуць гэтай памылкі, выкарыстоўваюць «распорку» - спецыяльны блок, які бачыць .second і .third. CSS-код:

• .second {float: left}
• .third {float: right}
• .clearfix {height: 0; clear: both;}

Часта выкарыстоўваюцца псевдокласс: after, які таксама дазваляе вярнуць блокі на месца з дапамогай стварэння псевдораспорки (у прыкладзе ў div з класам container ляжыць ўнутры .first і ўтрымлівае .left і .right):

• .left {float: left}
• .right {float: right}
• .container: after {content: ''; display: table; clear: both;}

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

Іншая праблема, з якой часта сутыкаюцца вярстальшчыкі, - выраўноўванне малымі-блочных элементаў. Пасля кожнага з іх аўтаматычна дадаецца прабел. Справіцца з гэтым дапамагае ўласцівасць margin, якому задаецца адмоўны водступ. Ёсць і іншыя спосабы, якія выкарыстоўваюцца значна радзей: напрыклад, абнуленне памеру шрыфта. У гэтым выпадку ва ўласцівасцях бацькоўскага элемента прапісваецца font-size: 0. Калі ўнутры блокаў размяшчаецца тэкст, то ва ўласцівасцях малымі-блочных элементаў ужо вяртаецца патрэбны памер шрыфта. Напрыклад, font-size: 1em. Спосаб зручны не заўсёды, таму значна часцей выкарыстоўваецца варыянт са знешнімі водступамі.

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