DIV容器内的HTML图像底部对齐

我有一个具有固定高度的div标签。大多数图像具有相同的高度和宽度。

我想将图像对齐在div的底部，以便它们被很好的排列。这是我到目前为止

<div id="randomContainer">
    <div id="imageContainer">
        <img src="1.png" alt=""/>
        <img src="2.png" alt=""/>
        <img src="3.png" alt=""/>
        <img src="4.png" alt=""/>
    </div>
    <div id="navigationContainer">
        <!-- navigation stuff -->
    </div>
</div>

CSS看起来像：

div#imageContainer {
    height: 160px;  
    vertical-align: bottom;
    display: table-cell;
}

我设法使底部的图像与display：table-cell和vertical-align：bottom css属性对齐。

有没有更清晰的方法来显示div作为表格单元格并对齐DIV标签底部的图像？

解决方法

这是你的代码： http://jsfiddle.net/WSFnX/

使用display：table-cell是很好的，只要你知道它不会在IE6 / 7中运行。除此之外，它是安全的：Is there a disadvantage of using `display:table-cell`on divs?

要固定底部的空间，请将vertical-align：bottom添加到实际的imgs中：

http://jsfiddle.net/WSFnX/1/

删除图像之间的空间可以归结为：bikeshedding CSS3 property alternative?

所以，这是一个演示，HTML中的空格被删除：http://jsfiddle.net/WSFnX/4/