<div> 中的 <img> 不会垂直对齐：中间，为什么？答案

【问题标题】：<img> in <div> won't vertical-align:middle, why?<div> 中的 <img> 不会垂直对齐：中间，为什么？
【发布时间】：2011-07-27 20:22:50
【问题描述】：

我们有 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;}

【问题讨论】：

你有两个结束标签...
好吧，“html 看起来像”，它们有各自的 alt、title 和 src 属性；）
这篇文章似曾相识。首先没有'float:center'这样的东西。
我知道，但它仍然有效（float:left;）但是，我问的是垂直 ;) thx

标签： css image vertical-alignment

【解决方案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>

【讨论】：

【解决方案2】：

您首先需要在#left 或#right 上声明一些高度以使其垂直对齐。（事实上，它没有比它占用的空间更多的已知空间来垂直对齐 - 所以它总是显示为顶部对齐。）

其次，请确保您正确理解vertical-align。这里有一个很好的资源：@987654321@ 总之，vertical-align 可能不是最好的解决方案。

【讨论】：

没有文字怎么办？设置高度但结果相同:(
如果我理解得很好，方法 2 会像我的编辑一样吗？？如果是这样，没有帮助.. :( 谢谢！
你还必须设置一个高度和行高（到父元素，所以#left或#right或#center）。看起来您设置了行高，但没有设置高度。试一试。

【解决方案3】：

图像上的vertical-align 是文本与图像的对齐方式，文本环绕图像的方式。不是div中图片的显示方式。

请在StackOverFlow查看此内容

【讨论】：

我明白了，但我的问题是我在玩水平和垂直图像......如果你已经知道尺寸，那篇文章似乎有帮助，但是谢谢！