Вирівнювання по центру: 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. Спосіб зручний не завжди, тому набагато частіше використовується варіант зі зовнішніми відступами.

Вирівнювання блоків дозволяє створити красиві і функціональні сторінки: це і верстка загального макету, і розташування товарів в інтернет-магазинах, і фотографії на сайті-візитці.