这里是一个关于JSFiddle的演示
HTML:
30
CSS:
.numberCircle { border-radius: 50%; behavior: url(PIE.htc); /* remove if you don't care about IE8 */ width: 36px; height: 36px; padding: 8px; background: #fff; border: 2px solid #666; color: #666; text-align: center; font: 32px Arial, sans-serif; }
为了使这个工作在IE8及以上 ,你必须下载和使用CSS3 PIE 。 我上面的演示在IE8中不起作用,但是这只是因为jsFiddle没有托pipePIE.htc 。
大多数其他答案的问题在这里是你需要调整外部容器的大小,以便它是基于字体大小和字符数显示的完美大小。 如果混合1位数字和4位数字,则不起作用。 如果字体大小和圆圈大小之间的比例不完美,则最终会在大圆的顶部垂直排列一个椭圆形或小数字。 这应该适用于任何数量的文字和任何大小的圆圈。 只需将width和line-height设置为相同的值即可:
.numberCircle { border-radius: 50%; width: 120px; font-size: 32px; border: 2px solid #666; } .numberCircle span { text-align: center; line-height: 120px; display: block; }
1 100 10000 1000000
对于基于内容的圆圈大小,这应该工作:
30 1 5435 2 100 .numberCircle { display:inline-block; line-height:0px; border-radius:50%; border:2px solid; font-size:32px; } .numberCircle span { display:inline-block; padding-top:50%; padding-bottom:50%; margin-left:8px; margin-right:8px; }
它依靠内容的宽度加上padding-来确定半径,然后使用padding-来扩展高度以匹配。 margin-需要根据字体大小进行调整。
更新删除内部元素:
30 1 5435 2 100
使用伪元素来强制高度。 需要零宽度空间垂直alignment。 将line-height:0px从外部移动到伪部分,以便在降级IE8时至less可见。
最简单的方法是使用bootstrap和badge类
1
这个版本不依赖于硬编码的固定值,而是相对于div的font-size 。
CSS:
.numberCircle { font: 32px Arial, sans-serif; width: 2em; height: 2em; box-sizing: initial; background: #fff; border: 0.1em solid #666; color: #666; text-align: center; border-radius: 50%; line-height: 2em; box-sizing: content-box; }
HTML:
30 1 2
你可以使用border-radius来实现这个function:
30
边界半径和填充值一起玩,直到你满意的结果。
但是这不适用于所有的浏览器。 我想IE仍然不支持圆angular。
我的解决scheme在这里 – 这很容易允许不同的大小和颜色和关系到CMS编辑控制。 IE降级为正方形。
HTML :
Fashion & Beauty
CSS :
.circular-label { overflow: hidden; z-index: 100; vertical-align: middle; font-size: 11px; -webkit-box-shadow:0 3px 3px rgba(0, 0, 0, 0.2); -moz-box-shadow:0 3px 3px rgba(0, 0, 0, 0.2); box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2); } .label-inner { width: 85%; height: 85%; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; border: 2px dotted white; vertical-align: middle; margin: auto; top: 5%; position: relative; overflow: hidden; } .label-inner > span { display: table; text-align: center; vertical-align: middle; font-weight: bold; text-transform: uppercase; width: 100%; position: absolute; margin: auto; margin-top: 38%; font-family:'ProximaNovaLtSemibold'; font-size: 13px; line-height: 1.0em; } .circular-label.label-size-large { width: 110px; height: 110px; -moz-border-radius: 55px; -webkit-border-radius: 55px; border-radius: 55px; margin-top:-55px; } .circular-label.label-size-med { width: 76px; height: 76px; -moz-border-radius: 38px; -webkit-border-radius: 38px; border-radius: 38px; margin-top:-38px; } .circular-label.label-size-med .label-inner > span { margin-top: 33%; } .circular-label.label-size-small { width: 66px; height: 66px; -moz-border-radius: 33px; -webkit-border-radius: 33px; border-radius: 33px; margin-top:-33px; }
不难看出如何做到这一点。 更大的问题是,是否有可能使圆规模的维度内容。
目前我不认为这是可能的。 任何人?
你像一个标准的块,这是一个正方形
.circle { width: 10em; height: 10em; -webkit-border-radius: 5em; -moz-border-radius: 5em; }
这是CSS 3的特点,它不是非常好压倒,你可以肯定的火狐和Safari浏览器。
1234
在你的CSS做这样的事情
div {
宽度:10em; 身高:10em;
-webkit-border-radius:5em; -moz-border-radius:5em;
}
p {
text-align:center; margin-top:4.5em;
}
使用段落标签来写文本。 希望有所帮助
就像我在这里所做的一样可以工作(对于数字0到99):
CSS:
.circle { border: 0.1em solid grey; border-radius: 100%; height: 2em; width: 2em; text-align: center; } .circle p { margin-top: 0.10em; font-size: 1.5em; font-weight: bold; font-family: sans-serif; color: grey; }
HTML:
30
改进第一个答案只是摆脱填充和添加line-height和vertical-align :
.numberCircle { border-radius: 50%; width: 36px; height: 36px; line-height: 36px; vertical-align:middle; background: #fff; border: 2px solid #666; color: #666; text-align: center; font: 32px Arial, sans-serif; }
HTML示例
1 Regiones del Interior
码
.numberCircle { border-radius:50%; width:40px; height:40px; display:block; float:left; border:2px solid #000000; color:#000000; text-align:center; margin-right:5px;
}
三十几岁的答案是正确的,但缺less一点。 你需要添加位置:相对 ,如果你想在圆中居中的数值,也包括不同的数字范围。 例如123;
HTML:
30
CSS:
.numberCircle { border-radius: 50%; behavior: url(PIE.htc); /* remove if you don't care about IE8 */ width: 36px; height: 36px; padding: 8px; position: relative; background: #fff; border: 2px solid #666; color: #666; text-align: center; font: 32px Arial, sans-serif; }
但最简单的解决scheme是使用Bootstrap
123
如果觉得《html 数字加圆圈 如何使用CSS围绕一个数字用圆圈?》对你有帮助,请点赞、收藏,并留下你的观点哦!