Question

我在圆形div中以数字为中心遇到了麻烦。我使用的编码适用于所有其他元素，但由于某种原因，一个数字不会像其他元素那样居中。

我试图缩小问题范围，我发现的唯一问题是字体大小似乎是问题所在。在较小的字体大小中，数字居中，大小较大，数字位于左侧。

这是一个错误或其他人经历过的事情吗？实时链接here.这是我所指的第四个圈子。

HTML：

<div class="circle">
    <div>4.</div>
</div>

CSS：

#how-can-we-help-section-two .info-box-four .circle{
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: green;
    margin: 0 auto;
    margin-bottom:-50px;
    position:relative;
    border: 7px solid #ebeced;
}

#how-can-we-help-section-two .info-box-four .circle div{
    font-size: 35px;
    font-weight:bold;
    color: #fff;
    line-height: 90px;
}

感谢任何能够看到问题所在的人。

Answer 1

问题是padding: 80px 40px 40px 40px;的{{1}}。

您可以.text-box解决问题。

position:absolute;

Answer 2

因为你周围的包装行为。您可以使用绝对定位的div，也可以将line-height: 90px替换为width: 100%; height: 100%; display: inline-block; div内的.circle {/ 1}}

影响对齐的字体大小

2 个答案: