* Идеальное * вертикальное выравнивание изображения

У меня есть квадрат div фиксированного размера и вы хотите разместить изображение произвольного размера внутри, чтобы оно было центрировано как по горизонтали, так и по вертикали, используя CSS. Горизонтально легко:

.container { text-align: center }

Для вертикали общее решение:

.container {
    height: 50px;
    line-height: 50px;
}
img {
    vertical-align: middle;
}

Но это не идеально, в зависимости от размера шрифта изображение будет примерно на 2-4 пикселя слишком далеко.

Насколько я понимаю, это потому, что "средний", используемый для вертикального выравнивания, на самом деле не является срединным, а конкретным положением на шрифте, близком к середине. A (слегка взломанный) обходной путь:

container {
    font-size: 0;
}

и это работает в Chrome и IE7, но не в IE8. Мы надеемся сделать все линии шрифтов одной и той же точкой, посередине, но, похоже, это промах в зависимости от браузера и, возможно, от используемого шрифта.

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

Смотрите демо всех трех решений здесь: http://jsfiddle.net/usvrj/3/

Те, у кого нет IE8, могут найти этот скриншот полезным:

IE8 screenshot when font-size is set to 0

Ответы

Ответ 1

Как использовать изображение в качестве фона? Таким образом, вы могли бы сосредоточить его повсюду. Что-то в этом роде:

margin:5px;
padding:0;
background:url(http://dummyimage.com/50) no-repeat center center red;
height:60px;
width:60px;

Ответ 2

Это ДЕЙСТВИТЕЛЬНО взломанно, но это то, что мы делали в ie6 дней.

.container {
     position: relative;
}
img {
     position: absolute;
     top: 50%;
     left: 50%;
     margin-top: -12px; // half of whatever the image height is, assuming 24px
     margin-left: -12px; // half of whatever the image width is, assuming 24px
}

В этом примере может отсутствовать что-то, но вы поняли.

Ответ 3

Если css3 является опцией, то flexbox выполняет хорошую работу при выравнивании по вертикали и по горизонтали:

ОБНОВЛЕНО FIDDLE

.container {
    display:flex;
    align-items: center; /* align vertical */
    justify-content: center; /* align horizontal */
}

Ответ 4

Вы пробовали следующее:

img {
    display: block;
    line-height: 0;
}

Я обычно использую этот хак, но я действительно не проверял его полностью в IE8.

Ответ 5

Вот небольшой скрипт JS, который я сделал: http://jsfiddle.net/rachit5/Ge4YH/

Я считаю, что это соответствует вашему требованию.

HTML:

<div>
    <img src=""/>
</div>

CSS

div{height:400px;width:400px;position:relative;border:1px solid #000;}
img{position:absolute;top:0;left:0;right:0;bottom:0;margin:auto;}