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