使用內聯塊時垂直對齊文本

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;
}

演示