我有两个元素并排。元素2比元素1小。两个元素都没有固定的高度。我需要将元素2垂直居中。我如何使用CSS实现此目的？CSS中的垂直中心元素
编辑：
这是我到目前为止有：
<div id="container" style="width: 100%;">
<div id="img1" style="float: left;">
<img src="image1.jpg".../>
</div>
<div id="img2" style="float: right;">
<img src="image2.jpg".../>
</div>
</div>
IMG1的身高总是比IMG2的高度。我想让img2垂直居中对齐。希望这可以澄清我正在努力完成的事情。
最直接，最干净的方法是使用display: table和vertical-align。然而，IIRC（自从我遇到浏览器兼容性问题以来已经有一段时间了）支持display: table并且朋友不在......一些常见的IE版本，也许呢？无论如何，如果display: table被忽略，添加其他规则来做出充分的回退可能会很好。
<div id="container" style="display: table;">
<div id="div1" style="display: table-cell; vertical-align: middle;">
<img id="img1" src="image1.jpg" />
</div>
<div id="div2" style="display: table-cell; vertical-align: middle;">
<img id="img2" src="image2.jpg" />
</div>
</div>
（当然样式应该待的样式;这仅仅是符合原来的例子，不知道该用例）。
的display值table，table-row，并且table-cell基本上执行完全相同如HTML table,tr和td，但您可以省略其中的任何一项（正如我在这里所做的，使用table-cell s直接在table s之内），并且布局引擎将做出明智之举。
为了澄清，必须从div中删除“float”才能工作。你可以使用'text-align：right'来移动img2。 – Joel 2010-01-07 21:53:51
感谢Kevin提供的直接解决方案。这个对我有用。 – 2010-01-07 21:55:41
不容易。一些受欢迎的黑客行为包括使用display：table-cell和一个使用display：table的父项（我不记得是否需要valign =“center”属性），或者使用顶部绝对定位：45％左右（不精确，但确定小元素）。
要确定最佳方法，我们需要更多地了解您的布局。它们以什么为中心？元素1和元素2之间是否会有很大的Y距离？他们的父母是否有固定的身高？他们都有同一个父母，还是一个是另一个的兄弟姐妹？你用什么方法将它们并排放置？
请记住，很多技巧在IE中需要额外的黑客行为，并且使用Javascript只是作弊，并且会让您的网站无法访问/烦人，视力低下的人（可能使用脚本未知屏幕阅读器），禁用脚本的人（特别是在移动或命令行浏览器上，如果可能的话，它们可能不会很好地支持它们），搜索引擎等。可能只使用CSS（尽管您可能需要添加一些容器元素），但确切的方法取决于你在做什么。
我不认为你可以在没有桌子的情况下可靠地做到这一点。凯文的解决方案可能会工作，除非你需要支持IE（我们大多数人都这样做）。而且，在这种情况下，表格标记实际上可能比基于div的标记小。
如果您只需要支持Safari等新浏览器（例如为iPhone构建webapp），则CSS3提供了一种无浮点或负边距的优雅方法。所有的细节在这里：http://www.html5rocks.com/en/tutorials/flexbox/quick/#toc-center
看看我提供的响应是否是http：// stackoverflow。com/questions/1909753/vertical-align-div-no-tables/1909802＃1909802适合你的需求 – 2010-01-07 21:32:16
我不确定这会工作，因为在我的问题中'元素1'没有固定的高度。 – 2010-01-07 21:39:19