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

Question

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

我可以使用 tables 轻松实现这一点，但在语义上，我认为我更喜欢使用 div。仅供参考，我正在使用 Bootstrap 框架。

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

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

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

Answer 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/

Answer 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/