html - 使用边框半径时，文本对齐不会居中和居中

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 在这个框的中间居中。​</p>

Answer 1

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

#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/

Answer 2

添加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 3

你可以通过定义来达到你想要的结果line-height: 50px;

http://tinkerbin.com/I2slDWGY

Answer 4

通过添加 line-height 和 vertical-align 属性

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

 height: 50px;
 text-align: center;
 width: 50px;
 line-height: 50px;
 vertical-align:middle;
} ​

http://jsfiddle.net/kFaXp/13/