How to use CSS to surround a number with a circle?
For circle sizes varying based on the content this should work:
.numberCircle {
display: inline-block;
line-height: 0px;
border-radius: 50%;
border: 2px solid;
font-size: 32px;
}
.numberCircle span {
display: inline-block;
padding-top: 50%;
padding-bottom: 50%;
margin-left: 8px;
margin-right: 8px;
}<span class="numberCircle"><span>30</span></span>
<span class="numberCircle"><span>1</span></span>
<span class="numberCircle"><span>5435</span></span>
<span class="numberCircle"><span>2</span></span>
<span class="numberCircle"><span>100</span></span>It relies on the width of the content plus the margin-'s to determine the radius, then extends the height to match using the padding-'s. The margin-'s would need to be adjusted based on the font-size.
Update to remove inner element:
.numberCircle {
display: inline-block;
border-radius: 50%;
border: 2px solid;
font-size: 32px;
}
.numberCircle:before,
.numberCircle:after {
content: '\200B';
display: inline-block;
line-height: 0px;
padding-top: 50%;
padding-bottom: 50%;
}
.numberCircle:before {
padding-left: 8px;
}
.numberCircle:after {
padding-right: 8px;
}<span class="numberCircle">30</span>
<span class="numberCircle">1</span>
<span class="numberCircle">5435</span>
<span class="numberCircle">2</span>
<span class="numberCircle">100</span>Uses pseudo-elements to force the height. Need the zero width space for vertical alignment. Moved the line-height:0px from the outer to the pseudo so that it is at least visible when degrading for IE8.
Here's a demo on JSFiddle and a snippet:
.numberCircle {
border-radius: 50%;
width: 36px;
height: 36px;
padding: 8px;
background: #fff;
border: 2px solid #666;
color: #666;
text-align: center;
font: 32px Arial, sans-serif;
}<div class="numberCircle">30</div>My answer is a good starting point, some of the other answers provide flexibility for different situations. If you care about IE8, look at the old version of my answer.
The problem with most of the other answers here is you need to tweak the size of the outer container so that it is the perfect size based on the font size and number of characters to be displayed. If you are mixing 1 digit numbers and 4 digit numbers, it won't work. If the ratio between the font size and the circle size isn't perfect, you'll either end up with an oval or a small number vertically aligned at the top of a large circle. This should work fine for any amount of text and any size circle. Just set the width and line-height to the same value:
.numberCircle {
width: 120px;
line-height: 120px;
border-radius: 50%;
text-align: center;
font-size: 32px;
border: 2px solid #666;
}<div class="numberCircle">1</div>
<div class="numberCircle">100</div>
<div class="numberCircle">10000</div>
<div class="numberCircle">1000000</div>If you need to make the content longer or shorter, all you need to do is adjust the width of the container for a better fit.
See it on JSFiddle.