底部对齐徽标和顶部对齐标题答案

【问题标题】：Bottom align logos and top align titles底部对齐徽标和顶部对齐标题
【发布时间】：2013-07-15 15:07:14
【问题描述】：

我正在尝试实现徽标网格的布局，其中徽标底部与公共基线对齐，徽标下方的标题顶部对齐。两者都居中水平对齐。

I can achieve this easily using tables，但在语义上，我认为我更喜欢使用 div。仅供参考，我正在使用 Bootstrap 框架。

我尝试了各种 CSS 组合，但总是遇到与 display 和 position 属性的冲突。

我确信也有 JavaScript 解决方案，我只想将其用作最后的手段。

谁能想到不使用表格或 JS 在 CSS 中做到这一点的方法？

【问题讨论】：

你试过 CSS display:table, table-cell吗？

标签： css layout css-tables graphical-logo

【解决方案1】：

我将每个 tr、td 和 table 元素更改为一个 div，并将一个类“table”添加到外部 div。之后我使用了以下css：

.table {
    display: table;
}

.table > div {
    display: table-row;
}

.table > div > div {
    width:33%;
    display: table-cell;
    text-align:center;
}
.logos div {
    vertical-align:bottom;
}
.titles td {
    vertical-align:top;
}

看起来像这样： http://jsfiddle.net/xtj3y/4/

编辑：

抱歉，没有按时看到您的问题。我做了一个改变。缺点是您必须使用绝对高度，而不是可变高度。

见： http://jsfiddle.net/xtj3y/18/

【讨论】：

我以为就是这样，但语义问题并没有真正解决。除非直观地看到，否则信息的流动是没有意义的。这就是我不想使用表格的原因。
我阅读了语义问题。对于那个很抱歉。我改变了它。请参阅编辑部分。
这仍然不起作用。图像未在第二行底部对齐。接受的答案有效并且具有更清晰的标记。不过感谢您的努力。

【解决方案2】：

div{
    display: inline-table;
    max-width: 200px;
    text-align: center;
}
div img{
  display: table-row;
}
div h3{
  display: table-row;
}

查看更新的小提琴： http://jsfiddle.net/xtj3y/3/

【讨论】：

请花时间格式化并确保您的代码有效。例如：jsfiddle.net/xtj3y/6
alt 是 <img> 标签的必需属性。 reference.sitepoint.com/html/img/alt#alt__li3
@FC' 感谢您的回答，但图片未居中对齐。
@kdev ：他们应该是。我在firefox 22上，一切都很好。似乎在 webkit 中失败了，只需添加 'margin: 0 auto;'到img
@FC' 花了一些时间来解决一些问题，但感谢您的回答，我成功了。感谢您的帮助。