Выравнивание — блок по вертикали

По поводу того, как выравнивать блок по вертикали написано масса материалов и статей, но самым простым способом является использование решения, которое будет работать везде. И все благодаря 3.

Помимо свойства display: table появилось есть свойство display: table-cell и именно комбинацию этих двух свойств мы будем использовать.

Схема работы очень проста — создается главный блок со свойством display: table, а в нем создается еще один блок, но уже со свойством display: table-cell и эта конструкция ведет себя как обычная таблица — высота вложенного блока занимает все пространство, то есть в данном случае становится равной высоте родительского блока. При этом содержимое блока выравнивается по вертикали по центру, если нет указания на иное, в том числе и блоки.

Выравнивание блока по вертикали, код :



Для наглядности окрасим родительский блок в красный, а дочерний в серый.

Выравнивание блока по вертикали, код CSS:



Мы увидим, что красного цвета не видно, это означает что дочерний блок имеет те же размеры, что и родительский и полностью его закрывает.

Результат: блок по вертикали:




Разумеется, помимо этих основных моментов выровнять блок по вертикали потребуется еще указать высоту главного блока, если это будет необходимо. При данном варианте решения задачи выравнивания не придется «бороться» с Internet Explorer, как было бы, если бы использовалось свойство display:inline-block.

Данный метод является самым простым и компактным из всех существующих и работает везде.

Посмотрите пример работы или исходный, кликнув на соответствующую кнопку:

"Выравнивание — блок по вертикали"

Вам будет интересно...

Добавить комментарий