css - 底部对齐 Logo 和顶部对齐标题

Question

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

I can achieve this easily using tables ，但在语义上，我认为我更愿意使用 div。仅供引用，我正在使用 Bootstrap 框架。

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

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

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

Answer 1

我将每个 tr、td 和 table 元素更改为一个 div，并向外部 div 添加了一个类“table”。之后我使用了以下 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/