Html 在div中居中显示文本

如何将div中的文本作为目标，以使数字在圆圈中居中

1
2.
3.
.珠子{
背景颜色：珊瑚；
边界半径：100%；
高度：35px；
宽度：35px；
文本对齐：居中；
颜色：白烟；
边缘顶部：5px；
}

对父级使用

display:table

，对单元格使用

display:table cell

。此方法必须具有子元素

试试这个：

.beads{
背景颜色：珊瑚；
边界半径：100%；
高度：35px；
宽度：35px；
文本对齐：居中；
颜色：白烟；
边缘顶部：5px；
显示：表格；
}
.珠子跨度{
显示：表格单元格；
垂直对齐：中间对齐；
}

1
2.
3.
4.
5.
6.
7.

只要给出

行高：35px使文本居中<代码>行高

等于div的高度

试试这个：

   .beads{
        background-color: coral;
        border-radius: 100%;
        height: 35px;
        width: 35px;
        text-align: center;
        color: whitesmoke;
        margin-top: 5px;
        line-height: 35px
    }

<div class="beads">1</div>
<div class="beads">2</div>
<div class="beads">3</div>

.beads{
背景颜色：珊瑚；
边界半径：100%；
高度：35px；
宽度：35px；
文本对齐：居中；
颜色：白烟；
边缘顶部：5px；
线高：35px
}
1.
2.
3.

没什么不快，但若父母的身高发生变化（不是35px），这种方法就会失败。@RayonDabre-Yeah在我的答案中检查。它等于它的高度。如果改变高度，则改变线高度，这就是我特别提到的原因。。。；（添加

行高：35px；

。或者玩

填充

并移除

高度

。此外，一次发布一个问题。然后在回答第一个问题时提出后续问题。

   .beads{
        background-color: coral;
        border-radius: 100%;
        height: 35px;
        width: 35px;
        text-align: center;
        color: whitesmoke;
        margin-top: 5px;
        line-height: 35px
    }

<div class="beads">1</div>
<div class="beads">2</div>
<div class="beads">3</div>