<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 комментария:
Спасибо! В мемориз!
Знал про эту фишку, но в нужный момент забыл.
Спасибо автору и гуглу!
Отправить комментарий