div 内容居中显示：用于底部对齐的表格单元格答案

【问题标题】：Centering content of div with display: table-cell used to bottom aligndiv 内容居中显示：用于底部对齐的表格单元格
【发布时间】：2013-02-08 12:16:27
【问题描述】：

我正在尝试创建一个居中的 div，该 div 的内容（一些图像）底部对齐。底部对齐内容已经是我已经解决的一个棘手问题（使用HTML image bottom alignment inside DIV container）。但是，该解决方案取消了 div 的居中。

我的居中方式是使用display: inline-block;
原创，下对齐前的内容：
http://jsfiddle.net/5NuBD/

底部对齐的修复正在添加 display: table-cell;vertical-align: bottom;
新的，底部对齐的内容，不再居中：
http://jsfiddle.net/KurpZ/

我正在寻找一个也底部对齐的居中 div。这两种解决方案似乎不兼容。

【问题讨论】：

我误解了你的问题，并认为你想在#wrapper 内垂直居中你的图像容器（图像仍然在这个容器的底部）所以我对jsfiddle.net/KurpZ/1 的回答是无效的。

【解决方案1】：

按照 Chris 的建议，我最终将 css 设置为固定宽度。然后我使用 jquery 对每个图像的宽度求和，并在页面加载后手动设置.width()。这行得通。

【讨论】：

【解决方案2】：

如果div可以是固定宽度：

#wrapper {
    text-align:center;
    margin: 0 auto;
    width: 230px;
}

【讨论】：