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

08.03.2007 верстка, дизайн, css

Часто возникает проблема центрирования изображения в блоке фиксированного размера. Естественно, никаких проблем не возникает, если все изображения имеют одинаковый размер, все это достаточно просто реализовать при помощи CSS, задав границы для изображения сверху и слева и сделав из изображения блок (display:block). Сложности возникают, если все блоки имеют одинаковый размер, а вот изображения нет. Причем мы говорим исключительно об изображениях в виде вставки тэга <img>, а не о фоновом изображении. Т.е. фактически мы хотим выровнять изображения различных размеров по вертикали и горизонтали в блоках одинакового размера.

С горизонтальным выравниванием сложностей нет. Если мы не меняли свойство изображения и не делали из него блок (по умолчанию изображение это inline элемент), достаточно установить выравнивание текста по центру — text-align: center. Вертикальное выравнивание можно создать при помощи свойства display: table-cell; vertical-align: middle. Задается именно для блока, оборачивающего изображение. Работать все это будет в любом нормальном браузере, исключение — IE(Win/Mac).

Что касается IE, то в голову только приходит лишь идея выровнять элемент вертикально, применив vertical-align: middle и задав высоту блока, в котором будем центрировать элемент. Свойство line-height не подойдет в данной ситуации, поскольку, с изображениями данное свойство работает не корректно в IE/Win. Кроме этого, установка большого размера шрифта свойством font-size без указания высоты строки опять же будет проблематичным, поскольку образованный блок станет немного больше размера шрифта. В IE/Mac, в отличие от IE/Win, пользователь может изменять пиксельное значение размера шрифта и высоты строки, поэтому возникают противоречия при задании относительных величин в размерах. Т.о. один и тот же аргумент в подобном методе может мешать вертикальному выравниванию элемента в зависимости от браузера.

Благо IE частично поддерживает display: inline-block. Так вот, если поместить внутрь нашего блока inline-block типа span, установить его высоту в 100% (height: 100%) и выровнять вертикально (vertical-align: middle) как раз и получаем инлайн блок с желаемой высотой. Другими словами, мы получаем инлайн блок с такой же высотой как и родительский блок, в котором любой элемент, со свойством vertical-align: middle будет выровнен вертикально.

Примечания:

• Пустому inline-block элементу можно не задавать ширины в IE/Win, но в IE/Mac необходимо указывать минимальную ширину в 1px (иногда это приводит к смещению вложенного блока на 1px, исправляется это задание отрицательного значения границы в -1px, но это не является слишком большой проблемой).
• В IE/Mac иногда происходит смещение этого блока по вертикали на несколько пикселей. Исправляется это путем задания небольшого размера шрифта (small вполне сгодится) или высоты строки, причина подобного поведения с размерами шрифта не совсем понятна.

Вот такое комбинированное решение с использованием свойства блока display: table-cell и добавлением вложенного span'a со свойством display: inline-block решает подобную задачу, корректно центрируя изображение во всех браузерах.

Пример CSS кода:

<style type="text/css">
.wrapper {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    width: ...;
    height: ...;
}
.wrapper * {
    vertical-align: middle;
}
/*\*//*/
.wrapper {
    display: block;
}
.wrapper span {
    display: inline-block;
    height: 100%;
    width: 1px;
}
/**/
</style>
<!--[if IE]><style>
.wrapper span {
    display: inline-block;
    height: 100%;
}
</style><![endif]-->

Пример XHTML кода:

<div class="wrapper">
 <span></span>
 <img src="..." alt="...">
</div>

Еще один метод

Пример XHTML кода:

<div id="outer">
  <div id="middle">
    <div id="inner">
      any text
      any height
      any content, for example generated from DB
      everything is vertically centered
    </div>
  </div>
</div>

Пример CSS кода

<style type="text/css">
#outer {
 height: 400px;
 overflow: hidden;
 position: relative;
}
#outer[id] {
 display: table;
 position: static;
}
#middle {
 position: absolute;
 top: 50%;/* for explorer only*/
}
#middle[id] {
 display: table-cell;
 vertical-align: middle;
 position: static;
}
#inner {
 position: relative;
 top: -50%;/* for explorer only */
}
/* optional: #inner[id] {
 position: static;
} */
</style>

Прочитать более подробно об истории этого метода можно здесь

Селекторы типа #value[id], которые IE просто игнорирует прекрасно работают в «стандартных» браузерах.