我有两个要素并列。元素2小于元素1。两个元素都不具有固定的高度。我需要将元素2垂直居中。如何使用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并垂直对齐。但是，IIRC（自从我开始浏览器兼容性问题以来已经有一段时间了）display: table……也许某些普通版本的IE缺乏对朋友的支持。无论如何，如果display: table忽略则添加其他规则以进行适当的回退可能会很好。
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直接在小号tableS）和布局引擎会做合理的事情。
display
table
table-row
table-cell
tr
td
table- cell
