javascript - 带圆圈的背景应保持相同大小

Question

所以我想显示一个带圆圈背景的数字。但是我不知道号码的长度。当我有两位数字时，我当前的解决方案只会显示正确的大小。如果我只有一个数字，我如何确保它将保持不变？

.circled-background{
  background:lightgreen;
  border-radius:50%;
  padding:28px;
}

<h1>1 Digit</h1>
<i class="circled-background">1</i>
<br><br>
<h1>2 Digits </h1>
<i class="circled-background">11</i>
<br><br>
<h1>3 Digits</h3>
<i class="circled-background">111</i>

Answer 1

你已经差不多完成了，请进行以下更改以使其正常工作:)

CSS:

  

  .circled-background{
      background:lightgreen;
      border-radius:100%;
      width:80px;
      height:80px;
    }
.circled-background i {
    display:block;
    text-align:center;
     padding-top:35%;
}

   

 <h1>1 Digit</h1>
    <div class="circled-background"><i>1</i></div>
    <br><br>
    <h1>2 Digits </h1>
    <div class="circled-background"><i>11</i></div>
    <br><br>
    <h1>3 Digits</h3>
    <div class="circled-background"><i>111</i></div>