html - CSS的vertical-align属性起作用的条件是什么？

Question

我只找到这个页面，解释 CSS 的垂直对齐属性，但根据这个小提琴它不起作用：

http://jsfiddle.net/C8ejb/

CSS 的重要部分：（需要发布问题）

header
{
    display:inline-block;
    height:20%;
    width:100%;
    background:rgba(0,0,0,0.9);
    color:#ccc;
}
    header .header_content
    {       
        display:inline-block;
        background:rgba(255,255,255,0.4);
        vertical-align:middle;  
    }

那么，我们可以建立一个条件列表，我们可以实际使用垂直对齐属性，这可以节省很多“为什么我的垂直对齐规则不起作用？” 问题，我猜。

谢谢你的帮助 ！

Answer 1

这是演示

CSS：

header {
    display: table;   /* Change this */

    height:20%;
    width:100%;
    background:rgba(0,0,0,0.9);
    color:#ccc;      
}

.header_content {       
    display:inline-block;
    background:rgba(255,255,255,0.4);

    display: table-cell;   /* Change this */

    vertical-align: middle;
}

你可以在这里阅读更多信息。

Answer 2

垂直对齐仅影响彼此相关的多个内联块元素。如果您有两个.header_content高度不同的元素，您会看到它们垂直对齐到中间。

http://jsfiddle.net/C8ejb/5/