Центрирование картинки в блоке

Автор: Александр Головко и Егор Скорняков Дата публикации:

Задача

Выровнять картинку по центру блока.

Теория

Подобные задачи часто приходится решать при верстке каких-нибудь каталогов или других списков продукции.

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

Традиционное решение

Наиболее правильно, с точки зрения семантики, сделать такую картинку с помощью тега img и центрировать его, как рассказывается в статье Вертикальное выравнивание по центру.

Метод действенный, но достаточно тяжелый — требуется expression для IE6-7, накладывается ряд ограничений на родителя и сам выравниваемый элемент (см. заметки в статье «Вертикальное выравнивание по центру»).

Другой вариант

Все можно реализовать намного проще, если отказаться от тега img и положить картинку в background. Воспользуемся установкой позиционирования "center center":

div{
	background:url(path/pic.png) center center no-repeat;
	height:100px;
	width:100px;
}

Демо пример. Проверено в:

IE 6-8
Firefox 3.5
Opera 9.5-10.6
Safari 3

Заметка

Если требуется, фоновое изображение для удобства можно вынести в HTML — это позволит программно сформировать блок с картинками:

<div style="background:url(path/pic.png) center center no-repeat"></div>

Плюсы:

Снимает ограничения с родителей элемента (теперь они не обязаны не быть плавающим или с абсолютным/фиксированным позиционированием — а значит в некоторых случаях отпадает необходимость в лишнем контейнере);
не нужны expression для IE6-7;
не нужен родитель с overflow:hidden для обрезки больших рисунков;
код более компактный, понятный.

Минус:

Пострадала семантика — ведь картинку, если строго следовать принципам семантической верстки, все же надо было делать тегом img. Картинки, находящиеся в фоне не проиндексируются поисковиком, а значит будет хуже SEO;
Вопрос производительности остается открытым, т.к. ни в HTML, ни в CSS картинке не задан размер.

Вывод

Из-за отсутствия семантики рассмотренный метод не совсем корректен. Но тоже имеет право на жизнь, благодаря своим многочисленным плюсам.

Xiper