使用border-radius时,文本对齐不会居中和居中

Question

我需要调整一下.1到红色圆圈的中心,但它不起作用

#box {
    background: red;
    border-radius: 50% 50% 50% 50%;
    color: #FFFFFF;

    height: 50px;
    text-align: center;
    width: 50px;
}

http://jsfiddle.net/kFaXp/8/

如何让1在这个盒子的中间居中.

Answer 1

添加line-height: 50px;到元素的CSS.

#box {
    background: red;
    border-radius: 50% 50% 50% 50%;
    color: #FFFFFF; 
    height: 50px;
    text-align: center;
    width: 50px;
    line-height: 50px;
}?

http://jsfiddle.net/Kyle_Sevenoaks/kFaXp/9/

Answer 2

文本对齐中心仅水平居中.你可以试试这个

#box {
    background: red;
    border-radius: 50% 50% 50% 50%;
    color: #FFFFFF;

    height: 50px;
    text-align: center;
    width: 50px;
    vertical-align:middle;
    display:table-cell

}?

http://jsfiddle.net/kFaXp/14/