0

我想垂直对齐 3 个 div（类型、desc、lang）的内容。我尝试了垂直对齐：中间但没有成功。如果您查看此链接http://jsfiddle.net/Grek/Twru8/，您会注意到图片似乎与 div 的顶部对齐。问题是什么？谢谢

CSS

.medias-table-content-type, .medias-table-content-desc, .medias-table-content-lang {
    padding:10px 15px 10px 15px;
    background: #fff;
    text-align:center;
    vertical-align: middle;
    color: #000;
    width: 50px;
    float: left;
    position: relative;
}
4

2 回答 2

0

vertical-align（注意：区分大小写）仅适用于以下元素：

COL, CUSTOM, IMG, SPAN, TBODY, TD, TFOOT, TH, THEAD, TR

因此vertical-align样式不适用，DIV除非您通过添加其 CSS将其显示更改为table-cell（即：TD元素） 。style 也不能使用，因为它会强制元素显示为.display:table-cell;floatinline-block

所以相关的CSS应该是这样的：

.medias-table-content-type, .medias-table-content-desc, .medias-table-content-lang {
    padding:10px 15px 10px 15px;
    background: #fff;
    text-align:center;
    vertical-align: middle;
    color: #000;
    width: 50px;
    /*deleted
    float: left;
    */
    position: relative;
    /*added*/
    display:table-cell;
}
于 2012-08-20T07:51:32.227 回答
0

如果您想将内容集中在框中。给一个line-height与盒子高度相同的值。所以在你的例子中，盒子是60px，那么line-height盒子也是60px。但是您需要删除图像的所有其他填充和边距。

于 2012-08-18T09:53:56.913 回答