如何使用CSS将数字用圆圈包围？

Question

我想像这样的图片一样将数字围成一个圆圈：这可能吗，如何实现？

Answer 1

这是有关JSFiddle的演示和代码段：

.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>

我的答案是一个很好的起点，其他一些答案则为不同情况提供了灵活性。如果您关心IE8，请查看我答案的旧版本。

Answer 2

此处大多数其他答案的问题是，您需要调整外部容器的大小，以便基于字体大小和要显示的字符数，它是理想的大小。如果您混合使用1位数字和4位数字，则将无法使用。如果字体大小和圆圈大小之间的比例不完美，您将最终得到一个椭圆形或一个在大圆圈顶部垂直对齐的少量数字。这对于任何数量的文本和任何大小的圆圈都应该工作正常。只需将width和line-height设置为相同的值：

.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>

如果需要使内容变长或变短，只需调整容器的宽度以使其更合适。