Круглый фон должен оставаться того же размера

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

Yo нужно такую ​​же высоту, ширину для контейнера.

В противном случае круг радиус круга: 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/

Это может помочь вам. Пожалуйста, проверьте это.