垂直文本中心<div>

Question

所以我正在嘗試獲得2個div容器，它們都應包含居中文本（x軸和y軸）。

感謝Google和stackoverflow，我偶然發現了幾個與vertical-align等相關的解決方法。但似乎沒有任何效果。

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

vertical-align: middle ;

這是一個小提琴：

http://jsfiddle.net/7Rgvs/

Answer 1

基本上首先你必須從CSS中將父元素定義為表，然后你可以將它的子元素顯示為表格單元格。

例如，

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

看看這個鏈接，它會澄清你的疑問.. http://css-tricks.com/vertically-center-multi-lined-text/

Answer 2

Vertical-align:middle屬性不與position:absolute; 如果你使用vertical-align：middle然后嘗試這個布局修改后的布局http://jsfiddle.net/7Rgvs/5/

Answer 3

使用display：table作為（holder＃left-menu element）並顯示：table-cell作為內部holder元素並使用以下樣式：

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

我編輯了小提琴內的左側菜單： http ： //jsfiddle.net/7Rgvs/