Основи блокової верстки на прикладі центрування блокових елементів шаблону по вертикалі, використовуючи CSS-властивості: display: table-cell, line-height або position: absolute з половинним відступом.
Центрування будь-якого об'єкта по вертикалі в блокової верстці трохи складніше, ніж по горизонталі і має ряд умовностей. Але все по порядку.
Почну з того, що CSS-властивість vertical-align виробляє позиціонування елементів щодо «базової лінії» і не може бути застосоване для позиціонування всередині блокового елемента. Винятком є, так звана, «табличная осередок». Імітувати її «унікальні» властивості можна використовуючи CSS-властивість display із значенням table-cell. наприклад:
Результат буде мати вигляд:
Однак це не буде працювати в деяких старих браузерах, та й суперечить логіці блокової верстці. На мій погляд, якщо ви хочете використовувати властивості таблиць, використовуйте таблиці.
Для того ж щоб позиціонувати елементи в блокової верстці використовується ряд трюків. Найбільш поширений варіант з використанням CSS-властивості line-height. яке встановлює міжрядковий інтервал від базової лінії шрифту. наприклад:
Результат буде ідентичний попередньому прикладу. Нюанс полягає лише в тому, що в разі розриву рядків, коли текст не вміщається по ширині, висота стане в два рази більше і т.д. Щоб цього уникнути, можна скористатися CSS-властивість white-space із значенням nowrap - прогалини не враховуються, перенесення рядка ігнорується.
Дещо складніше, коли необхідно центрувати по вертикалі саме блоковий, а не рядковий елемент. У такому випадку досить складно досягти гнучкості, тому що потрібно знати розміри центрована блоку. Саме ж позиціонування засноване на використанні половинного значення відступу absolute елемента. наприклад:
Результат буде мати вигляд:
Іншими словами, використовуючи CSS-властивість position. ми задаємо absolute позиціонування елемента #block. щодо relative (головне щоб не static) елемента #parent. Далі, задаємо відступ елемента #block від верхнього краю елемента #parent рівного 50% (половині), тобто top: 50%. Знаючи висоту елемента #block. для повного центрування по вертикалі, ми можемо задати зсув, в половину його висоти, використовуючи CSS-властивість margin-top. тобто margin-top: -10px; за умови, що height: 20px; .