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

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

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

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

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

任何人都可以想到一种方法来在CSS中做到这一点，而无需使用表或JS？

2013-07-15 kdev

你尝试CSS'显示：table'，'表cell'？ – otinanai

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/

来源

2013-07-15 15:15:28 FLX

请花时间格式化并确保您的代码有效。例如：http://jsfiddle.net/xtj3y/6/ – Axel

格式化失败，但什么是无效的？ – FLX

'alt'是''标签的必需属性。 http://reference.sitepoint.com/html/img/alt#alt__li3 – Axel

我改变了每Tr，TD和表元素，以一个div并添加一个类“表”到外层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/

来源

2013-07-15 15:17:44

我以为是这样，但语义问题并没有真正解决。信息的流通是没有意义的，除非它被直观地看到。这就是为什么我想摆脱使用表格。 – kdev

我读过了语义问题。对于那个很抱歉。我改变了它。见编辑部分。 –

这仍然不起作用。图像不在第二行上对齐。接受的答案有效并且有更清晰的标记。感谢您的努力。 – kdev

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

回答

相关问题