CSS中垂直居中的元素

Question

我有两个要素并列。元素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垂直居中对齐。希望这可以澄清我要完成的工作。

Answer 1

最简单，最干净的方法是使用display: table并垂直对齐。但是，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直接在小号tableS）和布局引擎会做合理的事情。