Вертикальное выравнивание по центру

При использовании табличной верстки, не составляло труда выровнять, элементы или текст внутри ячейки, достаточно было задать свойство 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

Для примера выровняем абзац текста:

HTML:

<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) <0 ? style.marginTop="0" : style.marginTop=(200/2)-(parseInt(offsetHeight)/2) +'px');
}
*:first-child+html .parent span { /* хак для ие7 */
display: block;
z-index: expression(
runtimeStyle.zIndex = 1,
this == ((200/2)-parseInt(offsetHeight)/2) <0 ? style.marginTop="0" : style.marginTop=(200/2)-(parseInt(offsetHeight)/2) +'px');
}



Заметки:
— родитель не должен быть плавающим (float: left/right), так как плавающие элементы автоматически становятся блочными
— родитель не должен быть с абсолютным или фиксированным позиционированием (position: absolute/fixed)
— элемент, который выравниваем по центру (дочерний, в примерах это span и img) должны быть блочными, нужно для IE6 и IE7, так как отступы сверху/снизу работают только для блочных элементов.

Меню

Главная

Компьютерная помощь
Ремонт компьютеров
Ремонт ноутбуков
Ремонт планшетов
Ремонт apple
Веб-мастерская
Заправка картриджей

Веб-мастеру

HTML (1)
CSS (8)
Java Script (2)
PHP
XML (2)
DLE (2)
Joomla (17)
ModX (1)
WordPress
Drupal (1)

Сис-админу

Windows (18)
*nix (1)
Apple (1)

Контакты

Eduard L.
ICQ: 298-066-983
e-mail: edd15@mail.ru
skype: edduard36
tel: +7 (904) 214 82 20
подробнее


Панель управления

Not registered?