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>

Answer 2

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

其次，请确保您正确理解vertical-align。这是一个很好的资源：http://phrogz.net/css/vertical-align/index.html简而言之，vertical-align可能不是最佳解决方案。

Answer 3

图像上的

vertical-align是文本如何与图像对齐，即文本环绕图像的方式。不是图像在div中的显示方式。

请在StackOverFlow

上查看

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

修改

3 个答案: