使用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在此方框中间居中？

- Mike

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/

- Jitender

---

对于这个方法，文本始终位于中间，无论您的div高度如何。 - Jitender

Answer 2

在元素的CSS中添加line-height: 50px;。

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

- Kyle

---

那么，具有边框半径的 div 的行高是否应该与其宽度和高度相同？ - Mike

通常应该与 div 的高度相同 :) - Kyle

但是当高度增加时，我们必须更新行高。相比之下，我们应该显示表格单元属性。 - Jitender

是的，如果是动态的 div，那么表格单元格可能效果更好。但考虑到 OP 只要求一个静态的 div，这个解决方案是可行的。 - Kyle

Answer 3

你可以通过定义 line-height: 50px; 来实现你想要的效果。 http://tinkerbin.com/I2slDWGY

- Shailender Arora

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/

- maiis

---

在这种情况下，使用行高时，垂直居中对齐不起作用。 - Mike

@Mike：是的，你说得对，如果我们使用vertical-align:middle，我们必须使用display table cell。 - Jitender