Question

我想在这张图片中围绕一个圆圈中的数字：

Number in Circle Image

这可能吗？它是如何实现的？

Answer 1

这是一个demo on JSFiddle和一个代码段：

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

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

要在IE8 and older中完成此工作，您必须下载并使用CSS3 PIE。我上面的演示在IE8中不起作用，但这只是因为jsFiddle没有托管PIE.htc。

Answer 2

此处大多数其他答案的问题是您需要调整外部容器的大小，以便根据要显示的字体大小和字符数来确定它的完美大小。如果您要混合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>

如果您需要更长或更短的内容，您需要做的就是调整容器的宽度以便更好地适应。

See it on JSFiddle

Answer 3

如果它是20或更低，你可以使用unicode字符①②...⑳

http://www.alanwood.net/unicode/enclosed_alphanumerics.html

Answer 4

对于根据内容而变化的圆圈尺寸，这应该有效：

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-＆＃39}需要根据字体大小进行调整。

删除内部元素的更新：

<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时至少可见。

Answer 5

最简单的方法是使用bootstrap和徽章类

 <span class="badge">1</span>

Answer 6

此版本不依赖于硬编码的固定值，而是相对于font-size的{{1}}的大小。

http://jsfiddle.net/qod1vstv/

<强> CSS：

div

<强> HTML：

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

Answer 7

您可以使用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仍然不支持圆角。

Answer 8

我的解决方案 - 这可以轻松实现不同的尺寸和颜色，并与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;
}

看到如何做到这一点并不困难。更大的问题是是否有可能使圆的尺度成为内容。

目前我认为不可能。任何人吗？

Answer 9

你的工作方式与标准块一样，即方形

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

这是CSS 3的功能，并没有得到很好的支持，你可以依靠firefox和safari。

<div class="circle"><span>1234</span></div>

Answer 10

在你的css中做这样的事情

 div {
    width: 10em; height: 10em; 
    -webkit-border-radius: 5em; -moz-border-radius: 5em;
  }
  p {
    text-align: center; margin-top: 4.5em;
  }

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

Answer 11

这是一个demo on JSFiddle和一个摘要：

/* Creating a number within a circle using CSS */

.numberCircle {
    font-family: "OpenSans-Semibold", Arial, "Helvetica Neue", Helvetica, sans-serif;
    display: inline-block;
    color: #fff;
    text-align: center;
    line-height: 0px;
    border-radius: 50%;
    font-size: 12px;
    min-width: 38px;
    min-height: 38px;
}

.numberCircle span {
    display: inline-block;
    padding-top: 50%;
    padding-bottom: 50%;
    margin-left: 1px;
    margin-right: 1px;
}

/* Some Back Ground Colors */
.clrGreen {
    background: #51a529;
}
.clrRose {
    background: #e6568b;
}
.clrOrange {
    background: #ec8234;
}
.clrBlueciel {
    background: #21adfc;
}
.clrMauve {
    background: #7b5d99;
}

<span class="numberCircle clrGreen"><span>8</span></span>
<span class="numberCircle clrRose"><span>80</span></span>
<span class="numberCircle clrOrange"><span>800</span></span>
<span class="numberCircle clrMauve"><span>8000</span></span>

Answer 12

这里是我使用平方方法的方法。好处是它可以使用不同的值，但是您需要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>

Answer 13

晚了聚会，但这是一个对我有用的仅引导程序的解决方案。我正在使用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>（或任何其他元素）中，就可以完成。

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

Answer 14

HTML示例

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

CODE

    .numberCircle { 

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

}

Answer 15

改善第一个答案只是摆脱填充并添加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;
}

Answer 16

像我所做的那样here可以起作用（对于数字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>

Answer 17

thirtydot的答案是正确的但是缺少一点。如果要在圆圈中设置居中值并包含不同的数字范围，则需要添加 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>

Answer 18

迟到聚会了，但这是我和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>

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

Answer 19

我很惊讶没有人使用flex，它更易于理解，因此我将答案的版本放在这里：

要创建一个圆，请确保width等于height
要适应圈子中font-size的数字，请使用em而不是px
要将数字在圆圈中居中，请将flex与justify-content: center; align-items: center;一起使用
如果数字增加（例如> 1000），请同时增加width和height

这里是一个例子：

.circled-number {
  color: #666;
  border: 2px solid #666;
  border-radius: 50%;
  font-size: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 2em; 
  height: 2em;
}

.circled-number--big {
  color: #666;
  border: 2px solid #666;
  border-radius: 50%;
  font-size: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 4em; 
  height: 4em;
}

<div class="circled-number">
  30
</div>

<div class="circled-number--big">
  3000000
</div>

如何用CSS围绕一个带圆圈的数字？

19 个答案: