CSS文本居中，用於絕對定位的div

Question

我讀過大多數類似的文章，但是都沒有使用等於高度的line-height或display：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;
}

Java腳本

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)得到$(height)

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

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

Answer 2

只需在CSS中添加一行，

在.cell

.cell{line-height:33px;}

這樣就可以了，根本不需要任何艱苦的工作:)

更新的小提琴

如果您希望它動態添加

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

更新的小提琴