在css中做这样的事情吗

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

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

如果是20或更低，你可以直接使用unicode字符①②…⑳

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

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

三十点的答案是对的，但少了一点。你需要添加位置:相对，如果你想在圆中有居中值，还包括不同范围的数字。 例如123;

HTML:

< div级30 =“numberCircle > < / 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> .

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

.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降级时至少是可见的。