Картинка по центру страницы

6 июня, 2009

Этой статьёй хочу расширить тематику сайта и ввести новую рубрику «Кирпичики» (bricks). В «кирпичиках» буду публиковать советы, приёмы и решения по тем или иным областям моей деятельности. Так как основное своё время я занимаюсь конструированием сайтов, то первый совет — правильное центрирование картинки любого размера с ссылкой.

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

html-шаблон для вывода картинки. Этот шаблон используется для всех картинок вне зависимости от их размера, которые надо вставить в текст по центру страницы:

<div class="center_illustration">
	<a href="#large_picture">
		<img src="#small_picture" alt="Подпись к фотографии" />
		<span>Подпись к фотографии</span>
	</a>
</div>

и css оформление этого шаблона. Здесь всё очень просто: т.к. элемент img отображается по-умолчанию как inline, то он будет выравниваться так, как задано в родительском контейнере. Подпись к картинке специально заключили в span что-бы присвоить отображение как block. Поэтому заголовок займёт целиком всю строку по ширине родительского контейнера.

div.center_illustration {
	text-align: center;
}
div.center_illustration span {
	display: block;
}

Если подпись к картинке не обязательна, то тег span и его содержимое можно не выводить.

Можно оформить картинку: сделать рамочку и паспарту. Для этого даже не нужно вводить новые теги — просто оформляем существующий тег img:

div.center_illustration img {
	/* ширина паспарту */
	padding: 15px;
	/* цвет заливки */
	background: #cde;
	/* рамочка вокруг паспарту */
	border: 3px solid #ссс;
}

Причем заливку паспарту можно делать не только одним цветом, но и текстурой:

div.center_illustration img {
	background: transparent url(img_tile.gif) repeat;
}

Вот и всё. Практически всё оформление меняется только редактированием css. Как это выглядит на сайте можно посмотреть здесь же — все фотографии центрируются и оформляются в статьях именно таким образом.