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

【问题标题】：HTML image bottom alignment inside DIV containerDIV 容器内的 HTML 图像底部对齐
【发布时间】：2011-09-25 03:26:42
【问题描述】：

我有一个固定高度的 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 标签底部对齐图像？

【问题讨论】：

标签： html css image alignment spacing

【解决方案1】：

设置父div为position:relative，内部元素为position:absolute; bottom:0

【讨论】：

这仅在您设置容器的高度时才有效。

【解决方案2】：

这是你的代码：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/

【讨论】：

【解决方案3】：

Flexbox 可以通过使用 align-items: flex-end; 和 display: flex; 或 display: inline-flex; 来实现这一点

div#imageContainer {
    height: 160px;  
    align-items: flex-end;
    display: flex;

    /* This is the default value, so you only need to explicitly set it if it's already being set to something else elsewhere. */
    /*flex-direction: row;*/
}

JSFiddle example

CSS-Tricks has a good guide for flexboxes

【讨论】：

我认为你不需要flex-direction: column; 部分；很适合我！
由于您将 flex-direction 从默认的 row 更改为 column，align-items 属性现在用于水平对齐子级。您应该从上述代码中删除 flex-direction 属性或将 align-items 更改为 justify-content
不知何故这个答案搞砸了：曾经存在的flex-direction: column;永远不会工作，但必须是flex-direction: row;，jsfiddle上的示例从不包括flex-properties，而是display: table-cell。尽管如此，这个答案解决了我的问题，因此投票赞成。
Stnge @David，感谢您指出这一点。看起来 JSFiddle 忘记了我真正的小提琴，然后有人点击了链接并创建了另一个小提琴来覆盖我的？我会更新 JSFiddle。
另请注意@David，flex-direction: row; 是默认值，因此除非其他一些 css 设置它，否则您可以将其留空，它的行为将与 flex-direction: row; 一样。

【解决方案4】：

<div>有些比例

div {
  position: relative;
  width: 100%;
  height: 100%;
}

<img>有自己的比例

img {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: auto; /* to keep proportions */
  height: auto; /* to keep proportions */
  max-width: 100%; /* not to stand out from div */
  max-height: 100%; /* not to stand out from div */
  margin: auto auto 0; /* position to bottom and center */
}

【讨论】：

这个方案很遗憾，当外层容器/视口的宽度发生变化时非常容易出错。