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 宽度是 元素的长度的一半