Вертикальное выравнивание на CSS, line-height и vertical-align middle
При верстке страниц часто бывает необходимо выровнять содержимое элемента по середине, причем как по горизонтали, так и по вертикали. Если сделать выравнивание по горизонтали не составляет особого труда, то вертикальное выравнивание может вызвать затруднения. Такое выравнивание может понадобиться для различных виджетов на сайте, например, нужно выровнять картинку строго по середине. Рассмотрим, как решить задачу вертикального выравнивания.
Раньше страницы верстались при помощи таблиц (табличная верстка), сейчас же принято использовать блочную верстку на основе тегов 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 можно достаточно просто, в статье приведены наиболее популярные методы.
Последние статьи
- 04.06.20 Как самому перенести сайт на другой хостинг или тариф удаленно, без скачивания на компьютер
- 03.06.20 Какой тариф выбрать и на сколько заказывать хостинг чтобы сэкономить
- 02.06.20 Какой тип хостинга выбрать – обычный виртуальный, хостинг для CMS, VPS, VDS или выделенный сервер
- 01.06.20 Как сделать счетчик просмотров материала на сайте
- 10.05.20 Как в программировании быстро придумать правильные названия переменных, функций, классов, свойств, методов и т.д.