Numbers centered in a circle - html

Question

.circle{
width: 20px;
height: 20px;
border: 1px solid #2d2d2d;
color: #2d2d2d;
border-radius: 50%;
cursor: pointer;
display: inline-block;
padding: 10px;
margin: 0 3px;
vertical-align: middle;}
.choice .circle{
position: relative;
top: 50%;
transform: translateY(-50%);
text-align: center;
}
<div class="choice">
<div class="circle" data-attr-val="2000" data-attr-price="59">2000</div>
<div class="circle" data-attr-val="20" data-attr-price="59">20</div>
</div>
In the example you can see my problem, 4 or more numbers looks bad, 1-3 numbers looks good.
How can I center 4 or more numbers?
Thanks for help :)

Answer 1

Have a look at this
HTML
<div class="choice">
<div class="circle" data-attr-val="2000" data-attr-price="59">2000</div>
<div class="circle" data-attr-val="20" data-attr-price="59">20</div>
CSS
.circle {
width:50px;
height:50px;
border:1px solid black;
border-radius:250px;
line-height:50px;
text-align:center;
display:inline-block;
}
Fiddle here

Answer 2

Remove the left and right padding, and increase the width instead by an equal amount – then you can get four digits centered in there via text-align. (More digits might still be problematic though.)
.circle{
width: 40px;
height: 20px;
border: 1px solid #2d2d2d;
color: #2d2d2d;
border-radius: 50%;
cursor: pointer;
display: inline-block;
padding: 10px 0;
margin: 0 3px;
vertical-align: middle;
text-align:center;
}
.choice .circle{
position: relative;
top: 50%;
transform: translateY(-50%);
text-align: center;
}
<div class="choice">
<div class="circle" data-attr-val="2000" data-attr-price="59">2000</div>
<div class="circle" data-attr-val="20" data-attr-price="59">20</div>
</div>

Answer 3

Here is a version using display: inline-table and a pseudo element.
These circle:before rule's properties will keep the numbers centered what ever size you set for the circle (though too small will look odd), even with two lines of numbers.
vertical-align: middle;
text-align: center;
I also used css attr() to set the numbers from your "data-attr-val" instead of adding them manually.
.circle {
display: inline-table;
width: 40px;
height: 40px;
border: 1px solid #2d2d2d;
color: #2d2d2d;
border-radius: 50%;
cursor: pointer;
}
.circle:before {
content: attr(data-attr-val);
display: table-cell;
vertical-align: middle;
text-align: center;
}
.circle.big {
width: 80px;
height: 80px;
}
.circle.big:before {
content: attr(data-attr-val);
}
<div class="choice">
<div class="circle" data-attr-val="2000" data-attr-price="59"></div>
<div class="circle" data-attr-val="20" data-attr-price="59"></div>
</div>
<br />2 lines, still centered<br /><br />
<div class="circle big" data-attr-val="10000 20000" data-attr-price="59"></div>