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

Answer 1

Text-align center 仅水平居中。你可以试试这个

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