Сегодня рассмотрим небольшой трюк для верстальщиков, который позволяет добиться вертикального выравнивания блока по центру, практически кроссбраузерного.
Пожалуй я начну с небольшой демострационной иллюстрации:
Скачать рабочий пример
1. Вот как должны выглядеть стили, обратите внимание на наличие display: table и display: table-cell, — последние задают обработку блоков, схожую с ячейками таблицы:
.table {
display: table;
}
.table-cell {
display: table-cell;
vertical-align: middle;
}
2. А так должна выглядеть верстка, HTML разметка:
<div class="... table ...">
<div class="... table-cell ...">
CSS текст по вертикали по центру...
</div>
</div>
P.S. Будет работать в IE8+. Google Chrome, Opera и конечно же в Mozilla Firefox с Yandex Browser.
Свежие комментарии