html 数字加圆圈,如何使用CSS围绕一个数字用圆圈？

这里是一个关于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