Вертикальное выравнивание по центру |
автор: eddvrned | 17 марта 2010 | Просмотров: 1957 |
При использовании табличной верстки, не составляло труда выровнять, элементы или текст внутри ячейки, достаточно было задать свойство 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: абзац какого-то жутко интересного и полезного текста 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, так как отступы сверху/снизу работают только для блочных элементов |
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
|
. |
Другие новости по теме: |
Компьютерная помощь
Веб-мастерская
Ремонт ноутбуков
Восстановление данных
Заправка картриджей
HTML (1)
CSS (6)
Java Script (2)
PHP
XML (2)
DLE (2)
Joomla (12)
ModX (1)
WordPress
Drupal (1)
Eduard L.
ICQ: 298-066-983
e-mail: edd15@mail.ru
skype: edduard36
tel: +7 (904) 214 82 20
подробнее