html - 使用内联 block 时垂直对齐文本

Question

几天来我一直在寻找这个问题的答案，但似乎没有任何解决方案能满足我的需要。请帮忙!

我有两个 div，我想填充浏览器的 100% 宽度，还有更多的 div 将堆叠以填充高度。 我希望每个文本(由 javascript 生成)垂直对齐。

我也尝试过使用 display:table-cell 它在所有方面都很好用，但是我无法将单元格宽度设置为固定的 %，我需要添加 html 标记，这似乎限制了我稍后使用某些媒体查询。

如何使用行内 block 垂直对齐文本？

我在制作 fiddle 时遇到了麻烦，但这很接近:http://jsfiddle.net/z4bj14op/

这是我的 CSS

html, body {
        margin: 0;
        padding: 0;
        height: 100%;
        overflow-y: hidden;
        font-family: helvetica;
    }
    #status {
        width: 100%;
        font-size: 0;
    }
    #line0, #status0 {
        display: inline-block;
        width: 50%;
        vertical-align: middle; 
        height: 10%;
    }
    h2 {
        font-size: 18px;
    }

    #line0 {
        background-color: #B36305;
        color: white;
    }
    #status0 {
        background-color: black;
        color: white;
    }

和 HTML

<div id ="status">
    <div id="line0"></div>  
    <div id="status0"></div>        
</div>

Answer 1

Steven Bradley 的文章 6 Methods For Vertical Centering With CSS:http://www.vanseodesign.com/css/vertical-centering/

哪种解决方案最好取决于您的要求。我认为绝对定位和负边距方式可能是您需要的解决方案，因为您的容器具有定义的高度。

---

当使用 display:inline-block;vertical-align:middle 时，元素仅垂直居中于当前行的其他内联元素。