使用内联块时垂直对齐文本

Question

几天来我一直在寻找答案，但没有一种解决方案似乎是我需要的正确解决方案。 请帮忙！

我有两个div，我想为其填充100％的浏览器宽度，并具有更多的这些堆叠以填充高度。 我希望每个文本 （由javascript生成）中的文本 垂直对齐。

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

如何使用内联块垂直对齐文本？

我在制作小提琴时遇到麻烦，但这很接近： 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）上有一篇文章，《 使用CSS垂直居中的6种方法》 ： http : //www.vanseodesign.com/css/vertical-centering/

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

---

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

Answer 2

这是你想要的吗 ？

JSfiddle示例

如果您希望两个div的宽度均为100％，那是不可能的！ 否则div的其余部分将被另一个隐藏

阐明更多需要的东西..

<div id ="status">
<div id="line0"><h2>Bakerloo</h2></div> 
<div id="status0"><h2>Good Service</h2></div>
</div>

CSS代码：

#line0{
background:pink;
width:50%;
display: inline-block;
}

#status0{ background:red; width:49%; display: inline-block; }

Answer 3

为什么使用display：inline-block？ 您必须使用这种方式吗？ 试着将float：left改为display：inline-block在＃line0，＃status0块内，之后您可以使用其他文本

Answer 4

你可以试试这个

#line0{
    background:pink;
    width:50%;
    display: inline-block;
    float:left;/*added*/
}
#status0{    
    background:red;
    width:50%;
    display: inline-block;
}

演示