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>

在示例中您可以看到我的问题，4 个或更多数字看起来很糟糕，1-3 个数字看起来不错。

如何将 4 个或更多数字居中？

感谢您的帮助:)

Answer 1

看看这个

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