Question

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

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

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

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

有没有人能想到在不使用表格或JS的情况下在CSS中执行此操作的方法？

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/

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

2 个答案: