Вирівнювання за центром: CSS-верстка

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


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


Надрукувати