CSS文本居中絕對定位的div

Question

我讀過最相似的帖子，但都沒有使用高度或顯示的行高：table-cell + vertical-align：middle幫助我將數字集中在絕對是我的div中定位。

任何幫助表示讚賞。

的Html

<div id='test'> 
</div> 

CSS

#test { 
    position: relative;  
    width: 100px; 
    height: 100px; 
    border: 1px solid black; 
} 

.cell { 
    display: table-cell; 
    vertical-align: middle; 
    position: absolute; 
    width: 33.33%; 
    height: 33.33%; 
    text-align: center; 
} 

.cell:hover { 
    background-color: red; 
} 

的Javascript

var cell = $("<div class='cell'></div>"); 
var e = $('#test'); 
var val; 
for(i=0;i<3;i++) { 
    for(j=0;j<3;j++) { 
     val = (i*3)+(j+1); 
     c = cell.clone(); 
     $(e).append(c); 
     $(c).html(val); 
     $(c).css('top',(i*33.33)+'%'); 
     $(c).css('left',(j*33.33)+'%'); 
     $(c).data('value',val); 
    } 
} 

鏈接：http://jsfiddle.net/wB7Mk/1/

Answer 1

您需要使line-height等於以像素爲單位的高度。你可以得到高度與$(height)

.css('line-height', $(c).height() + 'px'); 

http://jsfiddle.net/ExplosionPIlls/wB7Mk/2/

Answer 2

只需添加一行到你的CSS，

在.cell

.cell{line-height:33px;} 

這是不行的，不需要努力工作，在所有:)

更新的fiddle

如果你想讓它動態地添加

這

$('.cell').css("line-height","33px");

更新fiddle