css - 如何做一個完整的圓？裡面顯示數字

問題描述

數字有個位數到百位數

padding:10px; background-color:#F00; color:#fff; border-radius:50%;

<span class='alert'>9</span>

<span class='alert'>999</span>

如何讓它保持正圓的同時當有數字時不變形？ 個位數和百位數

問題解答

網上找了個

<p class='circle'> <span>999999</span></p>

.circle { display: inline-block; text-align: center; line-height: 1; background-color: red; border-radius:50%; font-size: 14px;}.circle span { display: block; padding: 50%; margin: -2em -50% 0; position: relative; top: 1em; border: 0.5em solid transparent; white-space: nowrap;}

http://jsfiddle.net/zcd75Lcd/

你要行把span設置為block 設置個寬高像下面的樣式

width: 30px;height: 30px;background-color: #F00;color: #fff;border-radius: 50%;display: block;text-align: center;line-height: 30px;

border-radius：xxx 寬度是 元素的長度的一半