Вертикальное выравнивание элемента уровня блока внутри элемента уровня блока - PullRequest
Новая
       5

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

2 голосов
/ 06 апреля 2009

Мне нужно выровнять изображения по центру (переменная ширина и высота) внутри элементов уровня блока фиксированной ширины и высоты. Разметка 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 Ответ

14 голосов
/ 06 апреля 2009

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

Настройка «vertical-align: middle» на элементах изображения работает, но выравнивает их только относительно строки , в которой они находятся в данный момент. Чтобы сделать линейный бокс такой же высоты, как и число с плавающей запятой, установите «line-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>
...