На этой страничке вы найдете ответ на вопрос, каким образом можно отцентровать картинку в блоке. Представленное решение будет проанализировано и будут рассмотрены все положительные и отрицательны эффекты.

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

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

Чаще всего установка картинки на странице осуществляется пользователем сайта посредством административной панели пользователя. Этот вариант наиболее вероятен, особенно в тех случаях, когда речь идет о интернет-магазинах. Админка позволяет выгружать на сайт картинки любого размера и почти любого формата. Причем исходно прописываются максимальные размеры блока и картинки. Таким образом, после заливки изображения оно будет масштабироваться под нужный размер или обрезать лишние фрагменты. При рассмотрении последнего варианта, наиболее оптимальным будет, если картинка будет отцентрирована по вертикали и горизонтали.

Классическое решение

Суть общепринятого решения заключается на действии свойств text-align и vertical-align. На первый взгляд все кажется довольно просто и логично, однако это не совсем так.

Напоминаю, что свойство vertical-align работает только для текстовых контейнеров и ячеек таблицы. Из этого выходит, что нам необходимо проимитировать состояние ячейки для нашего блока. С этим поможет свойство display при использовании значения table-cell. Это позволит выровнять картинку по центру по вертикальной оси. Горизонтальную центровку можно обеспечить через text-align.

Существенная проблема и сложность данного способа заключается в том, что всеми любимый Internet Explower не может корректно работать со значением table-cell. Поэтому требуется прописывать дополнительно expression для реализации метода.

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

HTML

<div class="block">
	<div class="img">
		<img width="200" src="img4.jpg">
	</div>
</div>
<div class="text">
	Текстовый блок
</div>

CSS

.block {
	width: 250px;
	height: 220px;
	margin:50px 100px;
	text-align:center;
	background:#eee;
	display: table-cell;
	vertical-align:middle;
html .block img { /* хак для ие6 */
        display: block;
        z-index: expression( /* оптимизированный expression,
        который сработает только при загрузке страницы */
        runtimeStyle.zIndex = 1,
        this == ((200/2)-parseInt(offsetHeight)/2)
 <0 ? style.marginTop="0" : style.marginTop=(200/2)
-(parseInt(offsetHeight)/2) +'px');
}
:first-child+html . block img { /* хак для ие7 */
        display: block;
        z-index: expression(
        runtimeStyle.zIndex = 1,
        this == ((200/2)-parseInt(offsetHeight)/2)
 <0 ? style.marginTop="0" : style.marginTop=
(200/2)-(parseInt(offsetHeight)/2) +'px');
}
.text {
	color:c7c7c7;
	margin-left:70px;
}

Результат проведенной работы смотрите на скриншоте ниже.

Альтернативное решение

Есть другой путь для реализации поставленной задачи, однако этот способ не соответствует требованиям семантики. Можно выводить картинку через CSS-свойство background, в котором указать расположение картинки как "center center". Это противоречит семантическим правилам, согласно которым логически значимая картинка должна выводится через тег img.

Ниже приведен код нашего альтернативного решения

CSS

.block {
	width: 250px;
	height: 220px;
	margin:50px auto;
	background:url(img4.jpg) #eee no-repeat center center;
	background-size:200px;
	display: block;
}

В результате использования первого либо второго метода получим один и тот же результат в браузере

<div style=" background:url(img4.jpg) #eee no-repeat center center"></div></p></div>

Плюсы и минусы метода

В сравнении с классическим вариантом, альтернативный вариант обладает следующими преимуществами:

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

Однако в тоже время метод имеет несколько недостатков:

• не соблюдение семантических правил;
• нерешенность вопроса по определению размера изображения.

Подводя итог

Альтернативный способ не рекомендуется использовать, так как соблюдение семантики является очень не мало важным фактором при верстке веб-страницы. Однако, перечень преимуществ перед классическим способом заставляет задуматься.