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时，元素仅垂直居中于当前行的其他内联元素。

Answer 2

这是你想要的吗？

JSfiddle Example

如果你想让两个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 inside block＃line0，＃status0以及之后你可以使用text-something

Answer 4

你可以尝试这个

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

<强> DEMO

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

4 个答案: