Вертикальное выравнивание в div или в блоке с фиксированной высотой

[21.06.2011 | 15:12]

Существует два способа выравнивания содержимого по центру относительно высоты блока, один самый простой - с использованием таблицы. Но таблицу желательно использовать только там, где явная таблица. И этот способ не применим, если надо выровнять содержимое внутри ссылки. Поэтому нужен и второй способ.
Код

<a href="#"><span>Статьи</span></a>


<a href="#"><span>Сопутствующие услуги</span></a>

В файле стилей прописываем

a {display:table;  height:48px; width:120px; text-align:center; }


a span  {display:table-cell;  height:48px; vertical-align:middle;}

Но значение display:table и display:table-cell, не понимают браузеры IE 6 и 7 версии, поэтому для этих браузеров надо прописать следующее

a {//display:block; }


a span { //display:block; //height:auto; //margin-top: expression((24-parseInt(offsetHeight)/2)  <0 ? "0" : 24-(parseInt(offsetHeight)/2) +'px') ;	}

Пример вертикального выравнивания в div элементе

Код

<div class="middle"><div><img src="images/img.jpg" width="60" height="60" alt="" /></div></div>

В файле стилей прописываем

.middle {display:table;  height:80px; width:80px; text-align:center; }


.middle div  {display:table-cell;  height:80px; vertical-align:middle;}


.middle div img {vertical-align:middle;}

Для IE 6 и 7 прописываем:

.middle {//display:block; }


.middle div { //display:block; //height:auto; //margin-top: expression((40-parseInt(offsetHeight)/2)  <0 ? "0" : 40-(parseInt(offsetHeight)/2) +'px') ;	}

в выражениях

expression((24-parseInt(offsetHeight)/2)  <0 ? "0" : 24-(parseInt(offsetHeight)/2) +'px') и expression((40-parseInt(offsetHeight)/2)  <0 ? "0" : 40-(parseInt(offsetHeight)/2) +'px')

указаны значения 24 и 40 – это половина высоты родительского блока, т.е. 48/2 (a {height:48px;}) и 80/2 (.middle {height:80px; })

//- свойства прописаны после этих знаков воспринимаются только браузерами IE6, IE7

Фактически вертикальное выравнивание происходит в обоих случаях в ячейке таблицы, только в первом случае задается явно, во втором средствами css. В примерах таблицами (элементы, у которых прописано свойство display:table) являются ссылка “a” и блок “.middle”, ячейки (элементы с параметром display:table-cell) – “ a span ” и “.middle div”. Но так как эти свойства не работают в браузерах IE6, 7, для них принцип выравнивания иной.
Здесь элементы “a”, “ a span ”, “.middle” и “.middle div” блочные (display:block;), высота не фиксированная (height:auto;) дочернему элементу “ a span ”, “middle div” , и с помощью выражения вычисляется верхний отступ дочернего элемента от родительского
= /2 – /2

Оценить: + | – +2 Комментировать

Раздел: Обучение
Теги: вертикальное выравнивание
Просмотров: 3222

Комментарии (5):

Андрей Данилов [Deff] [30 июня 13:05]

Только есть недостаток у display:table-cell - надо задавать ширину, иначе блок с таким свойством будет занимать место по ширине своего конетента.