绝对定位的 div 的 CSS 文本居中答案

【问题标题】：CSS Text Centering for absolutely positioned divs绝对定位的 div 的 CSS 文本居中
【发布时间】：2013-04-03 15:38:36
【问题描述】：

我读过大多数类似的帖子，但使用 line-height 等于 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;
}

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/

【问题讨论】：

标签： css html centering absolute

【解决方案1】：

您需要使line-height 等于高度（以像素为单位）。您可以通过$(height)获取高度

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

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

【讨论】：

【解决方案2】：

只需在您的 CSS 中添加一行，

在.cell

.cell{line-height:33px;}

这样就可以了，根本不需要努力:)

更新fiddle

如果你想要它动态添加这个

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

更新fiddle

【讨论】：

有没有办法以相对的方式指定它？我想做 33% 之类的事情..
你可以添加 jQuery Line，$('.cell').css("line-height","33px"); 这也可以:)