Вертикальное выравнивание изображения в блоке фиксированной высоты

Question

Я пытаюсь выровнять изображение по НИЗУ в блоке фиксированной высоты:

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

...работает в современных браузерах, кроме IE!Неудивительно, что IE — отстой, но мне действительно нужно исправление, если это возможно.

Отредактировано, чтобы добавить:Невозможно использовать таблицы или фоновое изображение.

Большое спасибо

Answer 1

Почему вы не можете просто использовать позицию: относительно деления, позицию: абсолютную и возиться с нижними/левыми свойствами?

Или переключите его положение на встроенный блок и поиграйте.

Answer 2

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

table {
    float: left; 
    width: 100px; 
    height: 100px; 
    line-height: 100px;
}

<table cellspacing="0" cellpadding="0">
    <tr>
        <td align="center" valign="bottom"><img src="foo.jpg" /></td>
    </tr>
</table>

Answer 3

Самый простой способ сделать это — использовать в DIV style="background:url(...) no-repeat center low" вместо тега IMG.

Answer 4

Я не могу найти его прямо сейчас, но я видел что-то, что позиционировало элемент на 50% (верхний уровень), а затем давало ему отрицательное верхнее поле -50%.

Просто для вертикального выравнивания, очевидно...