Newtag.Ru - городской блог Улан-Удэ

Некоторое время назад один товарищ обратился ко мне с таким вопросом: «Как вертикально отцентрировать элемент?» Я даже не сразу нашелся что и ответить. Дело в том, что в CSS уровня 2 такое свойство просто-напросто отсутствует. Ну что ж… если ширина и высота центрируемого элемента фиксированы, то проблем особых возникнуть не должно:

#centered {
height: 20em;
position: absolute;
top: 50%;
left: 50%;
margin-top: -10em;
margin-left: -20em;
}

Готово! А вот если блок резиновый, то придется совсем немного, но поизвращаться… прописываем для родителя:

{display: table;}
/* А для чаилда */
{display: table-cell; vertical-align: middle;}

Сново готово! Однако сей метод отказывается работать в IE. Хакать можно с использованием expression, то есть небольших кусочков javascript, встраиваемых непосредственно в CSS. Итак, эмулируем вертикальное выравнивание в IE для элемента с id=«centered» внутри другого элемента:

#centered {
margin-top: expression(((outer.offsetHeight/2)
-parseInt(offsetHeight)/2)  <0? «0»:
(outer.offsetHeight/2) -(parseInt(offsetHeight)/2) +''px'');
}

Таким образом мы получаем высоту элемента #centered по айди centered.offsetHeight и высоту div#outer соответственно. Если выравнивать нужно внутри тега , то код будет выглядеть следующим образом:

#centered{
margin-top: expression(( document.documentElement.offsetHeight/2)
-(parseInt(offsetHeight)/2) <0? «0»:
(document.documentElement.offsetHeight/2)
-(parseInt(offsetHeight)/2) +''px'');
}

Данное правило определяет высоту родительского элемента или body и высоту элемента, который нам необходимо отцентрировать, а затем просто добавляет нужный margin-top выравниваемому элементу. Вот, ну а если требуется вертикально выровнять только одну строку, то:

#centered {height: 10em; line-height: 10em;}