293

我想将一个数字围成一个圆圈，如下图所示：

圆形图像中的数字

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

4

20 回答 20

513

这是一个关于 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，请查看我的答案的旧版本。

于 2011-02-01T10:15:23.703 回答
141

这里大多数其他答案的问题是您需要调整外部容器的大小，使其成为基于字体大小和要显示的字符数的完美大小。如果您混合使用 1 位数字和 4 位数字，它将不起作用。如果字体大小和圆圈大小之间的比例不完美，您最终会得到一个椭圆形或一个在大圆圈顶部垂直对齐的小数字。这应该适用于任何数量的文本和任何大小的圆圈。只需将widthand设置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 上查看。

于 2013-10-27T01:08:44.790 回答
58

如果是 20 及以下，你可以使用 unicode 字符 ① ② ... ⑳</p>

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

于 2012-08-24T07:15:57.420 回答
51

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

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

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

更新以删除内部元素：

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

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

于 2015-09-15T13:37:31.733 回答
30

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

 <span class="badge">1</span>
于 2016-09-18T12:37:31.007 回答
27

此版本不依赖于硬编码的固定值，而是相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>
于 2016-11-08T16:02:27.503 回答
10

您可以为此使用边界半径：

<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仍然不支持圆角。

于 2011-02-01T10:13:13.560 回答
5

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

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

于 2018-09-09T06:50:04.573 回答
5

我很惊讶没有人使用flex它更容易理解，所以我把我的答案版本放在这里：

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

这是一个例子：

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

于 2020-12-15T22:17:36.180 回答
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;
}

不难看出如何做到这一点。更大的问题是是否有可能使圆圈的尺寸适应内容。

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

于 2012-09-12T13:41:30.157 回答
2

派对迟到了，但这是我使用https://codepen.io/jnbruno/pen/vNpPpW的解决方案

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

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

于 2018-12-11T21:46:32.793 回答
2 

.numberCircle {
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: block;
  float: left;
  border: 2px solid #000000;
  color: #000000;
  text-align: center;
  margin-right: 5px;
}
<h3><span class="numberCircle">1</span> Regiones del Interior</h3>

于 2017-06-16T17:23:04.400 回答
1

在你的 CSS 中做这样的事情

分区 {
    宽度：10em；高度：10em；
    -webkit-border-radius：5em；-moz-边界半径：5em；
  }
  p {
    文本对齐：居中；边距顶部：4.5em；
  }

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

于 2011-02-01T10:13:45.483 回答
1

像这样的东西可以工作（对于数字 0 到 99）：

.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;
}
<body>
  <div class="circle">
    <p>30</p>
  </div>
</body>

于 2013-06-04T19:56:42.937 回答
1

您就像使用标准块一样工作，即正方形

这是 CSS 3 的特性，它没有得到很好的支持，你可以肯定地依靠 firefox 和 safari。

.circle {
  width: 10em;
  height: 10em;
  -webkit-border-radius: 5em;
  -moz-border-radius: 5em;
  border: 1px solid black;
}
<div class="circle"><span>1234</span></div>

于 2011-02-01T10:19:37.433 回答
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;
}
于 2015-01-21T23:59:25.370 回答
1

这是我的做法，使用 square 方法。好处是它适用于不同的值，但您需要 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>

于 2018-09-09T07:42:49.113 回答
1

在此处输入图像描述

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

于 2020-09-08T20:20:54.683 回答
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>

于 2016-03-02T14:53:39.907 回答
0

您可以使用

span.red {
    background: red;
    border-radius: 0.8em;
    -moz-border-radius: 0.8em;
    -webkit-border-radius: 0.8em;
    color: #ffffff;
    display: inline-block;
    font-weight: bold;
    line-height: 1.6em;
    margin-right: 15px;
    text-align: center;
    width: 1.6em;
}

span.grey {
    background: #cccccc;
    border-radius: 0.8em;
    -moz-border-radius: 0.8em;
    -webkit-border-radius: 0.8em;
    color: #fff;
    display: inline-block;
    font-weight: bold;
    line-height: 1.6em;
    margin-right: 15px;
    text-align: center;
    width: 1.6em;
}

span.green {
    background: #5EA226;
    border-radius: 0.8em;
    -moz-border-radius: 0.8em;
    -webkit-border-radius: 0.8em;
    color: #ffffff;
    display: inline-block;
    font-weight: bold;
    line-height: 1.6em;
    margin-right: 15px;
    text-align: center;
    width: 1.6em;
}

span.blue {
    background: #5178D0;
    border-radius: 0.8em;
    -moz-border-radius: 0.8em;
    -webkit-border-radius: 0.8em;
    color: #ffffff;
    display: inline-block;
    font-weight: bold;
    line-height: 1.6em;
    margin-right: 15px;
    text-align: center;
    width: 1.6em;
}

span.pink {
    background: #EF0BD8;
    border-radius: 0.8em;
    -moz-border-radius: 0.8em;
    -webkit-border-radius: 0.8em;
    color: #ffffff;
    display: inline-block;
    font-weight: bold;
    line-height: 1.6em;
    margin-right: 15px;
    text-align: center;
    width: 1.6em;
}
    <h1><span class="grey">1</span>A grey circle with number inside</h1>
    <h1><span class="red">2</span>A red circle with number inside</h1>
    <h1><span class="blue">3</span>A blue circle with number inside</h1>
    <h1><span class="green">4</span>A green circle with number inside</h1>
    <h1><span class="pink">5</span>A pink circle with number inside</h1>

感谢https://wpsites.net/web-design/colored-numbered-circles-using-pure-css-html/

于 2021-10-04T15:08:33.770 回答