Элемент уровня блока вертикального выравнивания внутри элемента уровня блока

Мне нужно центрировать выравнивание изображений (переменной ширины и высоты) внутри элементов уровня блока фиксированной ширины и высоты. Разметка css выглядит примерно так:

<div style="float: left; width: 100px; height: 100px;"><img src="yada" width="50" height="60"></div>
<div style="float: left; width: 100px; height: 100px;"><img src="yada" width="60" height="50"></div>
<div style="float: left; width: 100px; height: 100px;"><img src="yada" width="75" height="75"></div>

Дело в том, что изображения выравниваются в верхнем правом углу контейнера div. Я хочу, чтобы они были центрированы, как по горизонтали, так и по вертикали. Я попытался установить стиль тега img следующим образом:

img {
display: block;
margin: auto;
}

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

Ответы

Ответ 1

Да, вертикальные поля рассчитываются принципиально другим способом по горизонтали; "Авто не означает центрирование.

Настройка "vertical-align: middle" на элементах изображения - это вид работ, но только выравнивает их по отношению к строке окна, они в настоящее время. Чтобы сделать линейную коробку той же самой высотой, что и float, установите "height-height" в контейнере:

<style>
    div { float: left; width: 100px; height: 100px; line-height: 100px; }
    div img { vertical-align: middle; }
</style>

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

К сожалению, IE (по крайней мере до 7) по-прежнему сохраняет поведение блока даже при попытке режима стандартов. Для этого есть техническая причина, а именно, что IE - штаны.

Чтобы убедить IE, что вы действительно имеете в виду, что изображения являются частью текстовой строки, вам нужно добавить текст внутри div - даже нормальное пространство сделает это, но вы также можете попробовать пространство с нулевой шириной

<div><img src="http://i.stackoverflow.com/Content/Img/stackoverflow-logo-250.png" width="50" height="60" />&#8203;</div>
<div><img src="http://i.stackoverflow.com/Content/Img/stackoverflow-logo-250.png" width="60" height="50" />&#8203;</div>
<div><img src="http://i.stackoverflow.com/Content/Img/stackoverflow-logo-250.png" width="75" height="75" />&#8203;</div>