Существует два способа выравнивания содержимого по центру относительно высоты блока, один самый простой — с использованием таблицы. Но таблицу желательно использовать только там, где явная таблица. И этот способ не применим, если надо выровнять содержимое внутри ссылки. Поэтому нужен и второй способ.
Код
<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
Только есть недостаток у display:table-cell — надо задавать ширину, иначе блок с таким свойством будет занимать место по ширине своего конетента.
и есть ещё один вариант вертикального выравнивания. он имеет жёсткие ограничения, но иногда (когда лень атакует) спасает. речь идёт о случаях, когда нужно центрировать по вертикали картинку. её можно просто положить инлайн-стилями в бекграунд. а остальное задать уже в цсс. с точки зрения интеграции, ИМХО, это не сложнее, чем прикрутить просто < img >.
Спасибо, хороший способ. Как раз сегодня пригодился. Хотя большой соблазн был поступить как описал Андрей Данилов [Deff] ;)
поскольку высота блока обычно известна, я упрощаю выражение
Еще вариант выравнивания img произвольных размеров в блоке с фиксированными размерами статья с примером