.numberCircle { 这个特性:50%; 宽度:40像素; 高度:40像素; 显示:块; 浮:左; 边框:2px实体#000000; 颜色:# 000000; text-align:中心; margin-right: 5 px; ｝ <h3><span class="numberCircle">1</span> Regiones del Interior</h3>

The problem with most of the other answers here is you need to tweak the size of the outer container so that it is the perfect size based on the font size and number of characters to be displayed. If you are mixing 1 digit numbers and 4 digit numbers, it won't work. If the ratio between the font size and the circle size isn't perfect, you'll either end up with an oval or a small number vertically aligned at the top of a large circle. This should work fine for any amount of text and any size circle. Just set the width and line-height to the same value:

.numberCircle { 宽度:120 px; 行高:120 px; 这个特性:50%; text-align:中心; 字体大小:32像素; 边框:2px实体#666; ｝ < div class = " numberCircle " > < / div > 1 < div class = " numberCircle”> 100 < / div > < div class = " numberCircle”> 10000 < / div > < div class = " numberCircle”> 1000000 < / div >

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

在JSFiddle上可以看到。

虽然迟到了，但这里有一个对我有效的自助解决方案。我使用Bootstrap 4:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/> 身体< > <div class="行mt-4"> < div class = " col-md-12”> <span class="bg-dark text-white round -circle px-3 py-1 mx-2 h3">1</span> <span class="bg-dark text-white round -circle px-3 py-1 mx-2 h3">2</span> <span class="bg-dark text-white round -circle px-3 py-1 mx-2 h3">3</span> < / div > < / div > 身体< / >

基本上，您将bg-dark text-white圆圆px-3 py-1 mx-2 h3类添加到<span>(或其他)元素中，就完成了。

请注意，如果内容有多个数字，则可能需要调整边距和填充类。

你可以使用

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/

我在这里的解决方案-这很容易允许不同的大小和颜色，并连接到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;
}

要知道怎么做并不难。更大的问题是，是否有可能使圆圈的尺寸与内容相匹配。

目前我认为这是不可能的。有人知道吗?

改进第一个答案，只需去除填充，并添加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;
}