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

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

通过使用宽度，可以实现..

.circled-background{ 
 
    background:lightgreen; 
 
    border-radius:50%; 
 
    padding:28px; 
 
    width:20px; 
 
    display:inline-block; 
 
    text-align:center; 
 
}

<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 2

你已经差不多完成了，请做以下修改，使其工作： ）

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>

Answer 3

哟需要相同的高度宽度的容器。

否则圆形边框半径：50％;将尽力使 现在的乡绅圈。

这不会形成圆圈。

当您的号码增长超过5位数时，您将看到您当前的解决方案将会中断。

Answer 4

.circled-background { 
    background:lightgreen; 
    border-radius:50%; 
    height: 100px; 
    width: 100px; 
    display: table; 
} 
.circled-background div { 
    display: table-cell; 
    text-align: center; 
    vertical-align: middle; 
} 

<div class="circled-background"><div>1</div></div> 
<br><br> 
<div class="circled-background"><div>11</div></div> 
<br><br> 
<div class="circled-background"><div>111</div></div> 
<br><br> 
<div class="circled-background"><div>1111</div></div> 

https://jsfiddle.net/ganesh16889/xg576472/

这可以帮助你。请检查这个。