Vertically align text when using inline-block

问题

I have been searching for an answer for this for days now and no solution seems to be the correct one for my needs. Please help!

I have two divs for which I want to fill 100% width of the browser, and have more of these which will stack to fill the height. I want the text in each of these (which is being generated from javascript ) to be vertically aligned.

I have also tried using display:table-cell and it works great in all ways, however I do not have the ability to set the cell width as a fixed %, and I need to add html markup which seems to limit me in using certain media queries later on.

How can I vertically align text using inline-block?

Im having trouble making a fiddle but this is close: http://jsfiddle.net/z4bj14op/

Here is my 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;
    }

And the HTML

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

回答1:

There is an article from Steven Bradley 6 Methods For Vertical Centering With CSS: http://www.vanseodesign.com/css/vertical-centering/

Which solution would be the best depends on your requirements. I think the Absolute Positioning and Negative Margin way could be the solution you need, as your container have a defined height.

When using display:inline-block;vertical-align:middle the element is only vertically centered to the other inline-elements of the current row.

回答2:

is this what you want ?

JSfiddle Example

If you want both of the divs to be 100% in their width that impossible ! otherwise the rest of the div will hidden by the other one

clarify more what's needed ..

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

css code:

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

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

回答3:

Why are you using display: inline-block? must you use this way? try to put float: left instead display: inline-block inside block #line0,#status0 and after you can work with text-something else

回答4:

You Can try this

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

DEMO

来源：https://stackoverflow.com/questions/25505263/vertically-align-text-when-using-inline-block

标签

html

vertical-alignment

css