html - 发布垂直对齐 3 个 div 的内容

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

vertical-align(注意:区分大小写)仅适用于这些元素:

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

因此 vertical-align 样式不适用于 DIV 除非您将其显示更改为 table-cell(即:TD 元素)通过添加 display:table-cell; 到它的 CSS。 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;
}