Title: Circled Background should stay the same size
Tags: javascript;html;css;web
Question: So I want to display a number with a circled background. However I don't know the length of the number. My current solution will only show the correct size when I have two digits. How can I ensure, that it will stay the same if I have only one digit?
.circled-background{
background:lightgreen;
border-radius:50%;
padding:28px;
<h1&gt;1 Digit</h1&gt;
<i class="circled-background"&gt;1</i&gt;
<br&gt;<br&gt;
<h1&gt;2 Digits </h1&gt;
<i class="circled-background"&gt;11</i&gt;
<br&gt;<br&gt;
<h1&gt;3 Digits</h3&gt;
<i class="circled-background"&gt;111</i&gt;
Comment: So you wanna keep the bg a circle or you dont mind it becoming a rounded rectangle? Because number with more digits will cause m7ch bigger circles

Here is the accepted answer: By using width, you can achieve..
.circled-background{
background:lightgreen;
border-radius:50%;
padding:28px;
width:20px;
display:inline-block;
text-align:center;
<h1&gt;1 Digit</h1&gt;
<i class="circled-background"&gt;1</i&gt;
<br&gt;<br&gt;
<h1&gt;2 Digits </h1&gt;
<i class="circled-background"&gt;11</i&gt;
<br&gt;<br&gt;
<h1&gt;3 Digits</h3&gt;
<i class="circled-background"&gt;111</i&gt;

Here is another answer: You have done almost, please do the below changes to make it work :)
.circled-background{
background:lightgreen;
border-radius:100%;
width:80px;
height:80px;
.circled-background i {
display:block;
text-align:center;
padding-top:35%;
<h1&gt;1 Digit</h1&gt;
<div class="circled-background"&gt;<i&gt;1</i&gt;</div&gt;
<br&gt;<br&gt;
<h1&gt;2 Digits </h1&gt;
<div class="circled-background"&gt;<i&gt;11</i&gt;</div&gt;
<br&gt;<br&gt;
<h1&gt;3 Digits</h3&gt;
<div class="circled-background"&gt;<i&gt;111</i&gt;</div&gt;

Here is another answer: .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"&gt;<div&gt;1</div&gt;</div&gt;
<br&gt;<br&gt;
<div class="circled-background"&gt;<div&gt;11</div&gt;</div&gt;
<br&gt;<br&gt;
<div class="circled-background"&gt;<div&gt;111</div&gt;</div&gt;
<br&gt;<br&gt;
<div class="circled-background"&gt;<div&gt;1111</div&gt;</div&gt;
https://jsfiddle.net/ganesh16889/xg576472/
This might help you. Please check this.

Here is another answer: Yo Need same height as width for the container.
Otherwise the circle border-radius:50%; will try to make round circle of
current squire.
Which will not take shape of circle.
And when your number grow more then 5 digit then you will see that your current solution will break.

{'source': 'StackExchangeDataset', 'subset': 'stackoverflow.com', 'metadata': {'AnswerCount': 4, 'CommentCount': 1, 'ContentLicense': 'CC BY-SA 3.0', 'CreationDate': '2017:00:02/09/17', 'FavoriteCount': None, 'PostTypeId': 1, 'Tags': '<javascript><html><css><web>', 'Title': 'Circled Background should stay the same size', 'ViewCount': 58, 'id': 42132041, 'user_AboutMe': None, 'user_AccountId': 7078298.0, 'user_DisplayName': 'user5417542', 'user_Reputation': 2781.0, 'user_Views': 137.0, 'user_id': 5417542.0}}