Вертикальное выравнивание img произвольных размеров

Каждому верстальщику приходилось сталкиваться с необходимостью центрировать изображение внутри блока не только по горизонтали, но и по вертикали. Если размеры изображения всегда постоянны и известны, то решение подобрать нетрудно. Мы рассмотрим случай, когда у картинки может быть произвольная высота и ширина.

Мне, например, часто приходится верстать мини-галереи, в которых изображения-превью вытянуты или по вертикали, или по горизонтали, но всегда располагаются в центре ячейки. Для таких случаев можно, конечно, использовать таблицы с vertical-align: middle, но использование таблиц не для табличных данных уже давно считается дурным тоном. 🙂

Как работает

Рассмотрим самый простой пример:

1
2
3
<div class=»wrap»>
<img src=»image.png» alt=»» />
</div>

Для современных браузеров все очень просто: задаем внешнему блоку display: table-cell и выставляем у вертикального выравнивания значение middle. Для горизонтального центрирования соответственно используем text-align: center.

1
2
3
4
5
6
7
8
9
10
11
12
div.wrap {
width: 200px;
height: 200px;
display:table-cell;
vertical-align:middle;
text-align:center;
}/* следующей строкой убираем погрешность в несколько пикселей */
div.wrap img {
vertical-align: middle;
}

Фиксим под ИЕ

Все бы хорошо, но только Ослик упрямится. Начиная с IE 7 и ниже display: table-cell и ему подобные не работают. Поэтому для IE прописываем индивидуальный стиль, задающий размер шрифта у внешнего блока:

1
2
3
div.wrap {
font-size: 163.8px; /* 90.5% от значения высоты блока */
}