Circled Hintergrund sollte die gleiche Größe bleiben

Question

So möchte ich eine Nummer mit einem eingekreisten Hintergrund anzeigen. Allerdings kenne ich die Länge der Nummer nicht. Meine aktuelle Lösung zeigt nur die korrekte Größe, wenn ich zwei Ziffern habe. Wie kann ich sicherstellen, dass es gleich bleibt, wenn ich nur eine Ziffer habe?

.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

Durch Breite verwenden, können Sie erreichen ..

.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

Sie fast getan haben, benutzen Sie bitte die folgenden Änderungen tun, damit es funktioniert:)

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 Need gleiche Höhe wie Breite für den Behälter.

Sonst der Kreis Rand-Radius: 50%; wird versuchen, runden Kreis von aktuellen Squire zu machen.

Welcher nicht die Form eines Kreises annehmen wird.

Und wenn Ihre Zahl mehr als 5 Ziffern wachsen, dann werden Sie sehen, dass Ihre aktuelle Lösung wird brechen.

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/

Dies könnte Ihnen helfen. Bitte prüfen Sie das.