Html 文本对齐不'；使用边界半径时，t居中

我需要将1号对准红色圆圈的中心，但它不工作

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

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

---

我怎么才能在这个盒子的中间放1根呢？​

添加

行高：50px到元素的CSS

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

通过添加线条高度和垂直对齐属性

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

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

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

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

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

}​

您可以通过定义
行高：50px

因此，线条高度应与具有边界半径的div的宽度和高度相同。通常应与div的高度相同：），但当高度增加时，我们还必须更新线条高度。如果它是一个动态div，那么表单元格将更好地工作，而不是显示表单元格属性y。但是，由于OP只要求一个静态div，所以这个解决方案是有效的。在这个解决方案中使用行高度时，垂直对齐中间不起任何作用case@Mike：是的，你是对的，如果我们使用垂直对齐，我们必须使用显示表格单元格：中间对于此方法，无论div高度如何，文本始终位于中间