среда, 23 января 2008 г.

Центровка в DIV по вертикали - хак для IE

Написав в CSS "vertical-align: middle;" можно получить вертикальное выравнивание контента внутри DIV в Firefox, Opera, Safari. Но не в Internet Explorer.

<div class="contest_logo">
<img src="http://www.blogger.com/{{%20featured_contest.contest.get_logo%20}}" />
</div>

Высота DIVа класса "contest_logo" фиксированная. Это рамка логотип конкурса. Конкурсы выводяться списком. Вот здесь.
Но вот картинки-логотипы имеют разную высоту. И их нужно выровнять внутри рамки по вертикали.

Решение для "нормальных" броузеров:
.contest_logo {
width: 252px;
height: 213px;
padding: 4px;
border:1px solid #9dbaec;
text-align: center;
display: table-cell;
vertical-align: middle;

}

Но в IE это не работает. Погуглив немного, нашел элегантное решение:
.contest_logo img {
vertical-align: middle;
margin-top: expression((213-height)/2 + "px");
}

IE поддерживает использование в CSS оператора expression(), внутри которого
можно поместить код на JavaScript.

2 комментария:

Анонимный комментирует...

Спасибо! В мемориз!

Анонимный комментирует...

Знал про эту фишку, но в нужный момент забыл.
Спасибо автору и гуглу!