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)和布局引擎会做合理的事情.