css - <div> 中的 <img> 不会垂直对齐 :middle, 为什么？

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>

知道我做错了什么吗？

顺便说一下，所有这些问题都是因为我是 displaying不同分辨率的图片 :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 上设置 line-height 来垂直对齐没有文本的 div 中的图像。示例:

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