<img> in <div>не выровнено по вертикали: среднее, почему?

Question

у нас есть CSS:

#left,#right{width:450px;height:450px;}
#left{position:absolute;left:20px;top:30px;}
#right{position:absolute;left:420px;top:30px;float:center;}

#left img, #right img{float:center; vertical-align:middle;cursor:pointer}

Изображение выровнено по горизонтали, но выровнено по верху (я хочу середину)

HTML выглядит как

<div id="media">
    <div id="left"><img/></div> <div id="right"><img/></div>
</div>

Есть идеи, что я делаю неправильно?

Кстати, вся эта проблема, потому что я отображаю изображения с разным разрешением: S

РЕДАКТИРОВАТЬ

Это не помогло ...: (

#left,#right{width:450px;line-height:450px;}
#left{position:absolute;left:20px;top:30px;}

#right{position:absolute;left:420px;top:30px;float:center;}
#left img,#right img{cursor:pointer;}

Answer 1

Вы можете выровнять изображение по вертикали в div, в котором нет текста, установив высоту строки в div.пример:

<div style="height: 100px; line-height: 100px;">
    <img src="http://nelson-haha.com" height="50" style="vertical-align: middle;"/>
</div>

Answer 2

Сначала вам нужно объявить некоторую высоту в #left или #right, чтобы выровнять ее по вертикали. (На самом деле, у него нет более известного пространства для выравнивания по вертикали, чем у занимаемого пространства - поэтому он всегда будет выглядеть выровненным сверху.)

Во-вторых, убедитесь, что вы правильно поняли vertical-align. Вот хороший ресурс: http://phrogz.net/css/vertical-align/index.html Короче говоря, vertical-align, вероятно, не лучшее решение.

Answer 3

vertical-align на изображении - это то, как текст выравнивается по изображению, как текст обтекает изображение. Не так, как изображение отображается в div.

Пожалуйста, смотрите это на StackOverFlow