如何使用CSS将数字用圆圈包围？

250

我想将一个数字围绕在这张图片中：

圆圈图像中的数字

这可能吗，如何实现？

html  css  css-shapes 
— 奔腾10
source

Answers:

442

这是有关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>
展开摘要

我的答案是一个很好的起点，其他一些答案则为不同情况提供了灵活性。如果您关心IE8，请查看我答案的旧版本。

— 三十点
source
Internet Explorer 9的当前最新版本实际上支持边界半径。...而div并不是一个很好的选择。:)
— reisio 2012年
7
显示：内联块；
— Kirkland 2013年
1
@KyleMit：从理论上讲，这是一个好主意。不幸的是，CSS3 PIE具有相同的域限制。
— 2014年
3
为了避免每次更改字体大小时都必须在CSS中进行数学运算（例如，如果您正在进行响应式设计很麻烦），则可以使用三十点jsfiddle的这种改编形式，该方法仅使用像素来描述字体大小：jsfiddle。净/ dQR9T / 7058
— 史蒂芬·史蒂芬（Steven）
1
@steven如何确保圆圈始终围绕数字，或者如果数字为24928，我们现在
— 变形金刚
108

此处大多数其他答案的问题是，您需要调整外部容器的大小，以便基于字体大小和要显示的字符数来调整外部容器的大小。如果您混合使用1位数字和4位数字，则将无法使用。如果字体大小和圆圈大小之间的比例不完美，您将最终得到一个椭圆形或一个在大圆圈顶部垂直对齐的少量数字。这对于任何数量的文本和任何大小的圆圈都应该工作正常。只需将width和line-height设置为相同的值：

.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>
展开摘要

如果需要使内容变长或变短，只需要做的就是调整容器的宽度，以使其更合适。

在JSFiddle上看到它。

— 麦克风
source
这正是我遇到的问题，显示其中的百分比可能是“ 1”，“ 10”或“ 100”。这很完美，谢谢！
— Felipe Castro 2014年
注意，此建议的编辑被拒绝了，但是更改实际上使文本在垂直方向上居中对齐，因此我将它们手动添加到了答案中。
— 迈克（Mike）
这是更好的答案。我将使用translateY（-50％）而不是负的最高边距
— Tobias
@Tobias谢谢你的好主意。我已经更新了答案。
— 迈克，
这将是更清洁，除去跨度，并添加text-align和line-height到div。也许还是最好的答案。
— dlsso
41

对于根据内容而变化的圆圈大小，此方法应该起作用：

http://jsfiddle.net/nzsnw55s/

<span class="numberCircle"><span>30</span></span>
<span class="numberCircle"><span>1</span></span>
<span class="numberCircle"><span>5435</span></span>
<span class="numberCircle"><span>2</span></span>
<span class="numberCircle"><span>100</span></span>

.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;
}

它依靠内容的宽度加上margin-'来确定半径，然后扩展高度以使用padding-' 进行匹配。的margin-需要根据字体大小进行调整。

更新以删除内部元素：

<span class="numberCircle">30</span>
<span class="numberCircle">1</span>
<span class="numberCircle">5435</span>
<span class="numberCircle">2</span>
<span class="numberCircle">100</span>

<style type="text/css">
.numberCircle {
    display:inline-block;

    border-radius:50%;
    border:2px solid;

    font-size:32px;
}

.numberCircle:before,
.numberCircle:after {
    content:'\200B';
    display:inline-block;
    line-height:0px;

    padding-top:50%;
    padding-bottom:50%;
}

.numberCircle:before {
    padding-left:8px;
}
.numberCircle:after {
    padding-right:8px;
}
</style>

使用伪元素强制高度。需要零宽度的空间用于垂直对齐。line-height:0px从外部将其移动到伪位置，以便在降级IE8时至少可见。

— 雷亚查
source
5
对我来说，这是最好的解决方案。它允许更大的数量，并且是最具扩展性的。所有其他解决方案都有太多的尺寸硬编码。这最少。可以在不破坏字体大小的情况下适当地更改字体大小。如果大幅更改，则需要调整边距，但这是非常宽容的。不过，必须使用嵌套元素在某种程度上是负面的。
— Necreaux
@Necreaux更新了答案，并用伪元素替换了显式内部元素。
— ryachza
1
确实是最佳解决方案。我只是用0.35em而不是8px替换了左边距和右边距的大小（在更新的解决方案中填充）。这样您就可以更改数字的字体大小并保持适当的边距。
— Jibato
24

最简单的方法是使用引导程序和徽章类

 <span class="badge">1</span>
— 海军蓝
source
4
这很棒！我已经在使用引导程序了，我只是不知道该类的存在。
— 贾斯汀
1
很好的回答，很酷！
— SeyedPooya Soofbaf
22

此版本不依赖于硬编码的，固定的值，但尺寸相对font-size的div。

http://jsfiddle.net/qod1vstv/

在此处输入图片说明

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：

<div class="numberCircle">30</div>
<div class="numberCircle" style="font-size: 60px">1</div>
<div class="numberCircle" style="font-size: 12px">2</div>
— 沃尔夫冈·齐格勒
source
1
嗨，这非常好，但是如果数字很大，即使以100或1000为单位，它也会滚动到圆圈之外。此外，是否有可能使用字体的大小来创建新的背景色
— 转换器
1
美丽的解决方案！
— jomofrodo
8

您可以为此使用border-radius：

<html>
  <head>
    <style type="text/css">

    .round
    {
        -moz-border-radius: 15px;
        border-radius: 15px;
        padding: 5px;
        border: 1px solid #000;
    }

  </style>
  </head>  
  <body>   
    <span class="round">30</span>
  </body>
</html>

播放边界半径和填充值，直到对结果满意为止。

但这并不适用于所有浏览器。我想IE仍然不支持圆角。

— 皮划艇
source
不要忘记`-webkit-border-radius：15px;`也有针对IE htmlremix.com/css/curved-corner-border-radius-cross-browser的修复程序，但要三思而后行
— Hannes
+1可能是最简单的方法... IE的备用广告看起来也不错（方形）。如果我记得的话，wordpress会这样吗
— Ross
4

我在这里的解决方案-这可以轻松地将不同的大小和颜色以及扎带放入CMS中，以进行编辑控制。用于IE降级为正方形。

HTML：

<div class="circular-label label-outer label-size-large label-color-pink">
    <div class="label-inner"> 
        <span>Fashion & Beauty</span>
    </div>
</div>

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;
}

看看如何做到这一点并不难。更大的问题是，是否有可能使圆的尺寸与内容成比例。

目前，我认为这是不可能的。任何人？

— Bearinthewoods
source
3

晚了聚会，但是这里有一个仅对我有用的引导程序解决方案。我正在使用Bootstrap 4：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<body>
<div class="row mt-4">
<div class="col-md-12">
<span class="bg-dark text-white rounded-circle px-3 py-1 mx-2 h3">1</span>
<span class="bg-dark text-white rounded-circle px-3 py-1 mx-2 h3">2</span>
<span class="bg-dark text-white rounded-circle px-3 py-1 mx-2 h3">3</span>
</div>
</div>
</body>
展开摘要

基本上bg-dark text-white rounded-circle px-3 py-1 mx-2 h3，您将类添加到您的<span>（或任何）元素中，然后就完成了。

请注意，如果您的内容超过一位，则可能需要调整边距和填充类。

— 网
source
2

您可以像使用标准方块一样工作

.circle {
    width: 10em; height: 10em; 
    -webkit-border-radius: 5em; -moz-border-radius: 5em;
  }

这是CSS 3的功能，并不是很好的支持，您可以肯定使用Firefox和Safari。 

<div class="circle"><span>1234</span></div>
— DamianLeszczyński-瓦什
source
2

HTML示例

<h3><span class="numberCircle">1</span> Regiones del Interior</h3>

码

    .numberCircle { 

    border-radius:50%;
    width:40px;
    height:40px;
    display:block;
    float:left;
    border:2px solid #000000;
    color:#000000;
    text-align:center;
    margin-right:5px;

}
— 莱昂纳多·维加
source
尽管此代码很有用，但最好提供一些解释
— mhatch
2

晚会晚了，但这是我使用https://codepen.io/jnbruno/pen/vNpPpW的解决方案

CSS：

.btn-circle.btn-xl {
    width: 70px;
    height: 70px;
    padding: 10px 16px;
    border-radius: 35px;
    font-size: 24px;
    line-height: 1.33;
}

.btn-circle {
    width: 30px;
    height: 30px;
    padding: 6px 0px;
    border-radius: 15px;
    text-align: center;
    font-size: 12px;
    line-height: 1.42857;
}

的HTML：

<div class="panel-body">
                            <h4>Normal Circle Buttons</h4>
                            <button type="button" class="btn btn-default btn-circle"><i class="fa fa-check"></i>
                            </button>
                            <button type="button" class="btn btn-primary btn-circle"><i class="fa fa-list"></i>
                            </button>
</div>

无需额外的工作。谢谢约翰·诺埃尔·布鲁诺

— Dt23
source
约翰·诺埃尔·布鲁诺是谁？如果是从博客或教程中获得，则提供链接将是一个加号
— Dush
1

在css中做这样的事情

 div {
    宽度：10em; 高度：10em；
    -webkit-border-radius：5em; -moz-border-radius：5em；
  }
  p {
    文字对齐：居中；边距最高：4.5em;
  }

使用段落标签来编写文本。希望能有所帮助

— 1000太阳
source
1

像我在这里所做的事情可能会起作用（对于数字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： 

<body>
    <div class="circle"><p>30</p></div>
</body>
— st
source
1

改善第一个答案就是摆脱填充并添加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;
}
— Hubyx Reds
source
1

这是我使用方形方法的方式。好处是它可以使用不同的值，但需要2个跨度。

.circle {
  display: inline-block;
  border: 1px solid black;
  border-radius: 50%;
  position: relative;
  padding: 5px;
}
.circle::after {
  content: '';
  display: block;
  padding-bottom: 100%;
  height: 0;
  opacity: 0;
}
.num {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.width_holder {
  display: block;
  height: 0;
  overflow: hidden;
}
<div class="circle">
  <span class="width_holder">1</span>
  <span class="num">1</span>
</div>
<div class="circle">
  <span class="width_holder">11</span>
  <span class="num">11</span>
</div>
<div class="circle">
  <span class="width_holder">11111</span>
  <span class="num">11111</span>
</div>
<div class="circle">
  <span class="width_holder">11111111</span>
  <span class="num">11111111</span>
</div>
展开摘要

— 克里斯·李
source
0

三十点的答案是正确的，但缺少一点。如果要在圆中具有居中的值，并且还包括不同的数字范围，则需要添加position：relative。例如123;

HTML：

<div class="numberCircle">30</div>

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;
}

但是最简单的解决方案是使用Bootstrap

<span class="badge" style ="float:right">123</span>

— 马可·马乔蒂（Marco Maggiotti）
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.