虽然迟到了，但这里有一个对我有效的自助解决方案。我使用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>(或其他)元素中，就完成了。

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

虽然迟到了，但下面是我用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>

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

这是我的方法，用平方法。优点是它适用于不同的值，但你需要两个跨度。

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

下面是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>

你用一个标准的方块，那是一个正方形

这是css3的特性，它不是很受支持，你可以依靠firefox和safari。

.circle { 宽度:10 em; 高度:10 em; -webkit-border-radius: 5 em; -moz-border-radius: 5 em; 边框:1px纯黑色; ｝ < div class = "圆" > < span > 1234 < / span > < / div >