Вертикальное выравнивание на CSS, line-height и vertical-align middle

11.07.18 ИТ / CSS 5643

При верстке страниц часто бывает необходимо выровнять содержимое элемента по середине, причем как по горизонтали, так и по вертикали. Если сделать выравнивание по горизонтали не составляет особого труда, то вертикальное выравнивание может вызвать затруднения. Такое выравнивание может понадобиться для различных виджетов на сайте, например, нужно выровнять картинку строго по середине. Рассмотрим, как решить задачу вертикального выравнивания.

Раньше страницы верстались при помощи таблиц (табличная верстка), сейчас же принято использовать блочную верстку на основе тегов div (блочная верстка). Это значит, что таблицы сегодня лучше не использовать для создания блоков, хотя выровнять содержимое ячейки таблицы раньше было совсем просто, чего не сказать о выравнивании в блоке div. При табличной верстке активно использовали атрибут valign.

Но решения есть. Для вертикального выравнивания в элементах можно использовать некоторые методы. Например, метод line-height. Он больше подойдет для выравнивания строки текста. Данный метод работает во всех браузерах. Значение 100px в этом примере выбрано произвольно, подберите нужное для себя самостоятельно, в зависимости от потребностей.

<div class="parent">
	<div class="child">Строка текста</div>
</div>

.child {
    line-height: 100px;
}

Другой способ заключается в следующем. Если для выравнивания содержимого блока по горизонтали служит CSS свойство text-align: center, то для вертикального выравнивания есть свойство vertical-align: middle. Это свойство работает только для строчных элементов, но можно адаптировать и для блочных. Это ответ на вопрос, почему не работает vertical-align: middle, который часто можно встретить на различных форумах и порталах. Нужно сделать специальный стиль отображения такого блока с помощью свойства display, пример ниже:

<div class="parent">
	<div class="child">Содержимое</div>
</div>

.parent {
	display: table;
}
.child {
    display: table-cell;
    vertical-align: middle;
}

Таким образом, сделать вертикальное выравнивание на CSS можно достаточно просто, в статье приведены наиболее популярные методы.