vertical text center in <div>

Question

So i am trying get 2 div-containers which both should contain centered text (Both x- and y-axis).

Thanks to Google and stackoverflow, i stumbled over a few workarounds which play with vertical-align etc. But nothing seems to work.

#right-menu {
    position: absolute ;
    right: 0% ;
    top: 0% ;
    height: 100% ;
    width: 5% ;
    text-align:  center ;
    background: #ededed ;
        display: table-cell;

vertical-align: middle ;

Here is a fiddle:

http://jsfiddle.net/7Rgvs/

Answer 1

Basically first you have to define the parent element as table from CSS and then you can display its child element as a table cell.

For example,

 div.parent {
    display: table;
 }
 div.parent div.child {
    display: table-cell; 
     vertical-align: middle;  
}

Check out this link, it would clarify your queries.. http://css-tricks.com/vertically-center-multi-lined-text/

Answer 2

Vertical-align:middle property is not used with position:absolute; if you are using vertical-align:middle then try this layout modified layout http://jsfiddle.net/7Rgvs/5/

Answer 3

use display: table for the (holder #left-menu element) and display: table-cell for the inner holder element and use this styles:

#left-menu .inner {
    display: table-cell;
    margin: 0 auto;
    text-align: center;
    vertical-align: middle;
    width: 100%;
}

i have edit the left menu inside your fiddle: http://jsfiddle.net/7Rgvs/