Вирівнювання по центру: css-верстка
При верстці сторінки часто виникає необхідність вирівнювання по центру CSS-способом: наприклад, центрувати основний блок. Існує кілька варіантів вирішення цієї проблеми, кожен з яких рано чи пізно доводиться використовувати будь-якого верстальщику.
Відео: Вирівнювання тексту в HTML: HTML атрибут align і його значення justify, left, right, center
Вирівнювання тексту по центру
Часто в декоративних цілях потрібно задати тексту вирівнювання по центру, CSS в цьому випадку дозволяє скоротити час верстки. Раніше це робилося за допомогою HTML-атрибутів, тепер же стандарт вимагає вирівнювати текст за допомогою таблиць стилів. На відміну від блоків, для яких потрібно змінювати зовнішні відступи, в CSS вирівнювання тексту по центру проводиться за допомогою одного рядка:
- text-align: center;
Це властивість успадковується і передається від батька всім нащадкам. Впливає не тільки на текст, а й на інші елементи. Для цього вони повинні бути малими (наприклад, span) або рядково-блоковими (будь-які блоки, яким задана властивість display: block). Останній варіант дозволяє також змінювати ширину і висоту елемента, більш гнучко налаштовувати відступи.
Часто на сторінках align приписують до самого тегу. Це відразу робить код невалідним, так як W3C визнав атрибут align застарілим. Використання його на сторінці не рекомендується.
Відео: CSS урок 18. Вирівнювання тексту
Вирівнювання блоку по центру
Якщо потрібно задати вирівнювання 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. Спосіб зручний не завжди, тому набагато частіше використовується варіант з зовнішніми відступами.
Вирівнювання блоків дозволяє створити красиві і функціональні сторінки: це і верстка загального макета, і розташування товарів в інтернет-магазинах, і фотографії на сайті-візитці.
