DIV容器内的HTML图像底部对齐 [英] HTML image bottom alignment inside DIV container

问题描述

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

I have a div tag with a fixed height. Most of the images have the same height and width.

我想在格底部对齐图像，使他们很好的安排。这是我到目前为止有：

I want to align the images at the bottom of the div so that they are nicely arranged. Here is what I have so far:

<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是这样的：

The CSS looks like:

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

我设法与显示排列在下方的图片：表单元格和垂直对齐：底部 CSS属性。

I managed to align the images at the bottom with display: table-cell and the vertical-align: bottom css attributes.

有一个更清洁的方式显示DIV的表芯，并在DIV标签的底部对齐图像？

Is there a cleaner way as displaying the div as table-cell and aligning the images at the bottom of the DIV tag?

推荐答案

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

使用显示：表细胞是好的，前提是你知道它不会在IE6 / 7的工作。除此之外，它是安全的：<一href="http://stackoverflow.com/questions/6307934/is-there-a-disadvantage-of-using-displaytable-cellon-divs">Is有使用`显示的缺点：表cell`on的div

Using display: table-cell is fine, provided that you're aware that it won't work in IE6/7. Other than that, it's safe: Is there a disadvantage of using `display:table-cell`on divs?

要解决该空间的底部，添加垂直对齐：底部实际 IMG S：

To fix the space at the bottom, add vertical-align: bottom to the actual imgs:

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

卸下图像之间的空间可以归结为这样：<一href="http://stackoverflow.com/questions/6350218/bikeshedding-css3-property-alternative/6351697#6351697">bikeshedding CSS3属性选择？

Removing the space between the images boils down to this: bikeshedding CSS3 property alternative?

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

So, here's a demo with the whitespace removed in your HTML: http://jsfiddle.net/WSFnX/4/

这篇关于DIV容器内的HTML图像底部对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！