Как отцентрировать контент в блоке по вертикали
Опубликовано: 06.02.2013 01:47       Автор: Ogri       Просмотров: 3536

Upd: English version of the article: How to vertically center content of a block.

На первый взгляд может показаться, что решение вынесенной в заголовок задачи тривиально: устанавливаем CSS-атрибут vertical-align:middle - и все дела. Но не так все просто. Принцип компоновки элементов традиционно основан на масштабировании по ширине, в высоту же содержимое растягивается или сжимается в соответствии с шириной. vertical-align удобно использовать в таблицах для центрирования содержимого ячеек, равно как и в блоках DIV с атрибутом display:table-cell. Ожидаемого поведения при вертикальном центрировании контента можно также достичь для элементов нормального потока страницы - блоков с атрибутом display:inline-block. Во всех же прочих случаях этот подход неприменим, поскольку большинство современных браузеров просто использует значение атрибута vertical-align для наследования дочерними inline-элементами блока. Здесь потребуется другая методика, описанию которой и посвящена эта статья.

Сразу оговорюсь: использование этой техники подразумевает два предположения:

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

Если эти условия соблюдены, делаем следующее:

  1. В стиле контейнера определяем атрибут position как relative или absolute.
  2. Задаем фиксированную высоту дочернего блока.
  3. Устанавливаем в стиле дочернего блока position:absolute и top:50%, совместив тем самым его верхнюю границу с серединой родительского блока.
  4. Присваиваем атрибуту margin-top дочернего блока значение, равное половине его высоты, что сдвинет дочерний блок вверх до совпадения его середины с серединой контейнера.

Пример:

<div style="position: relative;">
  Контейнер
  <div style="position:absolute; top:50%; height:8em; margin-top:-4em;">
    Отцентрированный по вертикали дочерний блок
  </div>
</div>

Вот как это выглядит в браузере:

Контейнер
Отцентрированный по вертикали дочерний блок

Пример практического использования данного метода при вписывании имиджа в контейнер вы можете найти в следующей статье.

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

Новые

Популярные