Блог Vaden Pro

Все о самостоятельном создании и продвижении сайтов

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

Раздел: 

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

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

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

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

Пример центровки изображений на сайтах

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

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

Суть общепринятого решения заключается на действии свойств 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;
}

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

Отображение результатов центровки в браузере

При использовании последнего метода опытные программисты выносят код с фоновой картинкой в HTML-документ. Это позволяет ориентироваться в документе и быстро найти блок с картинками. А выглядит это следующим образом:

HTML

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

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

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

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

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

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

Подводя итог

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