Question

我想垂直对齐3个div（type，desc，lang）的内容。我尝试了vertical-align：middle但没有成功。如果您查看此链接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;
}

Answer 1

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

Answer 2

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

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

所以vertical-align样式不适用于DIV，除非您通过向其{CSS添加table-cell将其显示更改为TD（即：display:table-cell;元素）。也不能使用float样式，因为它会强制元素显示为inline-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;
}

问题是垂直对齐3个div的内容

2 个答案: