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

Solution 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.

Solution 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 ..

<divid ="status"><divid="line0"><h2>Bakerloo</h2></div><divid="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; }

Solution 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

Solution 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