TA貢獻(xiàn)1856條經(jīng)驗 獲得超17個贊
這是有關(guān)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>
我的答案是一個很好的起點，其他一些答案則為不同情況提供了靈活性。如果您關(guān)心IE8，請查看我答案的舊版本。
TA貢獻(xiàn)1820條經(jīng)驗 獲得超9個贊
此處大多數(shù)其他答案的問題是，您需要調(diào)整外部容器的大小，以便基于字體大小和要顯示的字符數(shù)，它是理想的大小。如果您混合使用1位數(shù)字和4位數(shù)字，則將無法使用。如果字體大小和圓圈大小之間的比例不完美，您將最終得到一個橢圓形或一個在大圓圈頂部垂直對齊的少量數(shù)字。這對于任何數(shù)量的文本和任何大小的圓圈都應(yīng)該工作正常。只需將width和line-height設(shè)置為相同的值：
.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>
如果需要使內(nèi)容變長或變短，只需調(diào)整容器的寬度以使其更合適。
舉報