Вертикальное выравнивание по центру
Дата публикации: 20.08.2009
Задача
Сделать вертикальное выравнивание текста или элемента по центру относительно родителя, используя блочную верстку.
Теория
При использовании табличной верстки, не составляло труда выровнять, элементы или текст внутри ячейки, достаточно было задать свойство vertical-align: middle.
Как оказалось, элементы уровня блок не могут, аналогично ячейкам таблицы, вертикально выравнивать. Но CSS позволяет изменять поведение элементов (свойство display), например, сделать блок, который будет себя вести как ячейка таблицы — display: table-cell. Казалось бы, вот оно решение, простое и понятное, осталось добавить vertical-align: middle и можно наслаждаться результатами своих трудов. Но есть горяче любимый всеми веб-разработчиками браузер, который не даст так быстро ликовать — Interner Explorer. IE6 и IE7 не поддерживает значение свойства display table-cell. Приходится прибегать к программному решению (expression) для этих браузеров.
Решение
Делаем следующие:
- блоку-родителю, внутри которого будет вертикальное выравнивание, задаем высоту (height), display: table-cell и vertical-aling: middle — этого для большинства браузеров будет достаточно
- элементу, который будем выравнивать добавляем expression — скрипт, который при загрузке страницы, определит какой ему нужно сделать отступ сверху (в зависимости от высоты родителя и своей высоты), чтобы оказаться вертикально выровненным по центру (если нам нужно выровнять текст, его придется заключить в дополнительный контейнер). Этот трюк предназначен для IE6 и IE7
Для примера выровняем абзац текста:
<div class="parent">
<span>абзац какого-то жутко интересного и полезного текста</span>
</div>
CSS:
.parent {
background: #3399FF;
display: table-cell;
height: 200px;
vertical-align: middle;
color: #fff;
width: 400px;
}
* html .parent span { /* хак для ие6 */
display: block;
z-index: expression( /* оптимизированный expression, который сработает только при загрузке страницы */
runtimeStyle.zIndex = 1,
this == ((200/2)-parseInt(offsetHeight)/2)
}
*:first-child+html .parent span { /* хак для ие7 */
display: block;
z-index: expression(
runtimeStyle.zIndex = 1,
this == ((200/2)-parseInt(offsetHeight)/2)
}
Результат. По этой же схеме можно выравнивать любой элемент внутри, например изображение, плюс поместим ее в центр по горизонтали.
Проверено в:
Заметки
- родитель не должен быть плавающим (float: left/right), т.к. плавающие элементы автоматически становятся блочными
- родитель не должен быть с абсолютным или фиксированным позиционированием (position: absolute/fixed)
- элемент, который выравниваем по центру (дочерний, в примерах это span и img) должны быть блочными, нужно для IE6 и IE7, т.к. отступы сверху/снизу работают только для блочных элементов