blocks|key|98366|text|当然，你必须使用to标签来做这件事。一个用于创建圆，另一个用于文本。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|98367|这里有一些代码可能会对您有所帮助|98368|#circle+{
++++background:+#f00;
++++width:+200px;
++++height:+200px;
++++border-radius:+50%25;
++++color:black;

}
.innerTEXT{
++++position:absolute;
++++top:80px;
++++left:60px;
}

<div+id="circle">
++++<span+class="innerTEXT">+Here+a+text</span>
</div>|code-block|syntax|javascript|98369|这里是http://jsbin.com/apumik/1/edit的现场示例|offset|length|98370|更新|98371|这里较小，但有一些更改|98372|http://jsbin.com/apumik/3/edit|98373|entityMap|0|LINK|mutability|MUTABLE|url|http://jsbin.com/apumik/1/edit|1^0|0|0|0|3|U|0|0|0|0|0|U|1|0^^$0|@$1|2|3|4|5|6|7|11|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|12|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|13|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|14|8|@]|9|@$K|15|L|16|1|17]]|A|$]]|$1|M|3|N|5|6|7|18|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|19|8|@]|9|@]|A|$]]|$1|Q|3|R|5|6|7|1A|8|@]|9|@$K|1B|L|1C|1|1D]]|A|$]]|$1|S|3|-4|5|6|7|1E|8|@]|9|@]|A|$]]]|T|$U|$5|V|W|X|A|$Y|Z]]|10|$5|V|W|X|A|$Y|R]]]]

<p>Of course, you have to use to tags to do that. One to create the circle and other for the text.</p>

<p>Here some code may help you</p>

<pre><code>#circle {
    background: #f00;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    color:black;

}
.innerTEXT{
    position:absolute;
    top:80px;
    left:60px;
}

&lt;div id="circle"&gt;
    &lt;span class="innerTEXT"&gt; Here a text&lt;/span&gt;
&lt;/div&gt;
</code></pre>

<p>Live example here <a href="http://jsbin.com/apumik/1/edit" rel="noreferrer">http://jsbin.com/apumik/1/edit</a></p>

<p>Update</p>

<p>Here less smaller with a few changes</p>

<p><a href="http://jsbin.com/apumik/3/edit" rel="noreferrer">http://jsbin.com/apumik/3/edit</a></p>


blocks|key|315312|text|如果只有一行文本，您可以使用line-height属性，并使用与元素高度相同的值：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|315313|height:100px;
line-height:100px;|code-block|syntax|javascript|315314|如果文本有多行，或者内容是可变的，您可以使用padding：|315315|padding-top:30px;
height:70px;|315316|示例：http://jsfiddle.net/2GUFL/|offset|length|315317|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/2GUFL/^0|0|0|0|0|3|Q|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Y|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|Z|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|10|8|@]|9|@$M|11|N|12|1|13]]|A|$]]|$1|O|3|-4|5|6|7|14|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V]]]]

<p>If it's only one line of text you could use the line-height property, with the same value as the element height:</p>

<pre><code>height:100px;
line-height:100px;
</code></pre>

<p>If the text has multiple lines, or if the content is variable, you could use the padding-top:</p>

<pre><code>padding-top:30px;
height:70px;
</code></pre>

<p>Example: <a href="http://jsfiddle.net/2GUFL/" rel="noreferrer">http://jsfiddle.net/2GUFL/</a></p>


blocks|key|315341|text|我想你想把文字写成椭圆形还是圆形？为什么不是这个呢？|type|unstyled|depth|inlineStyleRanges|entityRanges|data|315342|​|315343|<span+style="border-radius:50%25;+border:solid+black+1px;padding:5px">Hello</span>|code-block|syntax|javascript|315344|315345|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|M|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|N|8|@]|9|@]|A|$G|H]]|$1|I|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

<p>I think you want to write text in an oval or circle? why not this one?</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;span style="border-radius:50%; border:solid black 1px;padding:5px"&gt;Hello&lt;/span&gt;</code></pre>
</div>
</div>
</p>


blocks|key|98485|text|将line-height设置为与div高度相同的值将显示一行垂直居中的文本。在这个例子中，高度和行高是500px。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|98486|示例|98487|JSFiddle|98488|​|98489|.circle+{
++width:+500px;
++height:+500px;
++line-height:+500px;
++border-radius:+50%25;
++font-size:+50px;
++color:+#fff;
++text-align:+center;
++background:+#000
}|code-block|syntax|javascript|98490|<div+class="circle">Hello+I+am+A+Circle</div>|98491|98492|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/rkEMR/^0|1|B|0|0|0|8|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|11|8|@$9|12|A|13|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|14|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|15|8|@]|D|@$9|16|A|17|1|18]]|E|$]]|$1|J|3|K|5|6|7|19|8|@]|D|@]|E|$]]|$1|L|3|M|5|N|7|1A|8|@]|D|@]|E|$O|P]]|$1|Q|3|R|5|N|7|1B|8|@]|D|@]|E|$O|P]]|$1|S|3|K|5|6|7|1C|8|@]|D|@]|E|$]]|$1|T|3|-4|5|6|7|1D|8|@]|D|@]|E|$]]]|U|$V|$5|W|X|Y|E|$Z|10]]]]

<p>Setting a <code>line-height</code> the same value as the height of the div will show one line of text vertically centered. In this example the height and line-height are 500px.</p>
<h3>Example</h3>
<p><a href="http://jsfiddle.net/rkEMR/" rel="noreferrer">JSFiddle</a></p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.circle {
  width: 500px;
  height: 500px;
  line-height: 500px;
  border-radius: 50%;
  font-size: 50px;
  color: #fff;
  text-align: center;
  background: #000
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="circle"&gt;Hello I am A Circle&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|315432|text|如果你的内容要换行并且高度未知，这是你最好的选择：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|315433|http://cssdeck.com/labs/aplvrmue|offset|length|315434|.badge+{
++height:+100px;
++width:+100px;
++display:+table-cell;
++text-align:+center;
++vertical-align:+middle;
++border-radius:+50%25;+/*+may+require+vendor+prefixes+*/
++background:+yellow;
}|code-block|syntax|javascript|315435|​|315436|.badge+{
++height:+100px;
++width:+100px;
++display:+table-cell;
++text-align:+center;
++vertical-align:+middle;
++border-radius:+50%25;
++background:+yellow;
}|315437|<div+class="badge">1</div>|315438|315439|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|W|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Z|8|@]|9|@$D|10|E|11|1|12]]|A|$]]|$1|F|3|G|5|H|7|13|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|14|8|@]|9|@]|A|$]]|$1|M|3|N|5|H|7|15|8|@]|9|@]|A|$I|J]]|$1|O|3|P|5|H|7|16|8|@]|9|@]|A|$I|J]]|$1|Q|3|L|5|6|7|17|8|@]|9|@]|A|$]]|$1|R|3|-4|5|6|7|18|8|@]|9|@]|A|$]]]|S|$T|$5|U|V|W|A|$X|C]]]]

<p>If your content is going to wrap and be of unknown height, this is your best bet:</p>

<p><a href="http://cssdeck.com/labs/aplvrmue">http://cssdeck.com/labs/aplvrmue</a></p>

<pre><code>.badge {
  height: 100px;
  width: 100px;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  border-radius: 50%; /* may require vendor prefixes */
  background: yellow;
}
</code></pre>

<p><div class="snippet" data-lang="js" data-hide="true" data-console="false" data-babel="false">
<div class="snippet-code snippet-currently-hidden">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.badge {
  height: 100px;
  width: 100px;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  border-radius: 50%;
  background: yellow;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="badge"&gt;1&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|315487|text|如果你使用的是Foundation+5和Compass框架，你可以试试这个。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|315488|.sass输入|315489|$circle-width:+rem-calc(25)+!default;
$circle-height:+$circle-width+!default;
$circle-bg:+#fff+!default;
$circle-radius:+50%25+!default;
$circle-line-height:+$circle-width+!default;
$circle-text-align:+center+!default;

@mixin+circle($cw:$circle-width,+$ch:$circle-height,+$cb:$circle-bg,+$clh:$circle-line-height,+$cta:$circle-text-align,+$cr:$circle-radius)+{
++++width:+$cw;
++++height:+$ch;
++++background:+$cb;
++++line-height:+$clh;
++++text-align:+$cta;
++++@include+inline-block;
++++@include+border-radius($cr);
}

.circle-default+{
++++@include+circle;
}|code-block|syntax|javascript|315490|.css输出|315491|.circle-default+{
++width:+1.78571rem;
++height:+1.78571rem;
++background:+white;
++line-height:+1.78571rem;
++text-align:+center;
++display:+-moz-inline-stack;
++display:+inline-block;
++vertical-align:+middle;
++*vertical-align:+auto;
++zoom:+1;
++*display:+inline;
++-webkit-border-radius:+50%25;
++-moz-border-radius:+50%25;
++-ms-border-radius:+50%25;
++-o-border-radius:+50%25;
++border-radius:+50%25;
}|315492|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>If you are using Foundation 5 and Compass framework, you can try this.</p>

<p>.sass input</p>

<pre><code>$circle-width: rem-calc(25) !default;
$circle-height: $circle-width !default;
$circle-bg: #fff !default;
$circle-radius: 50% !default;
$circle-line-height: $circle-width !default;
$circle-text-align: center !default;

@mixin circle($cw:$circle-width, $ch:$circle-height, $cb:$circle-bg, $clh:$circle-line-height, $cta:$circle-text-align, $cr:$circle-radius) {
    width: $cw;
    height: $ch;
    background: $cb;
    line-height: $clh;
    text-align: $cta;
    @include inline-block;
    @include border-radius($cr);
}

.circle-default {
    @include circle;
}
</code></pre>

<p>.css output</p>

<pre><code>.circle-default {
  width: 1.78571rem;
  height: 1.78571rem;
  background: white;
  line-height: 1.78571rem;
  text-align: center;
  display: -moz-inline-stack;
  display: inline-block;
  vertical-align: middle;
  *vertical-align: auto;
  zoom: 1;
  *display: inline;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
}
</code></pre>


blocks|key|98708|text|在最近的网页设计中，我被要求在一个固定的圆圈问题中解决居中和未知数量的文本，我想我应该在这里分享这个解决方案给其他正在研究圆圈/文本组合的人。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|98709|我遇到的主要问题是，文本经常会打破圆圈的界限。为了解决这个问题，我最终使用了4个div。一个矩形容器，用于指定圆的最大(固定)边界。里面是div，用来绘制宽度和高度设置为100%25的圆，因此更改父对象的大小会改变实际圆的大小。里面是另一个矩形div，使用%25s，它将创建一个文本边界区域，防止任何文本离开圆圈(大部分情况下)，最后是文本的实际div和垂直居中。|98710|作为代码，它更有意义：|98711|​|98712|/*+Main+Container+-++this+controls+the+size+of+the+circle+*/
.circle_container
{
	width+:+128px;
	height+:+128px;
	margin+:+0;
	padding+:+0;
/*	border+:+1px+solid+red;+*/
}

/*+Circle+Main+draws+the+actual+circle+*/
.circle_main
{
	width+:+100%25;
	height+:+100%25;
	border-radius+:+50%25;
	border+:+2px+solid+black;	/*+can+alter+thickness+and+colour+of+circle+on+this+line+*/
	margin+:+0;
	padding+:+0;
}

/*+Circle+Text+Container+-+constrains+text+area+to+within+the+circle+*/
.circle_text_container
{
	/*+area+constraints+*/
	width+:+70%25;
	height+:+70%25;
	max-width+:+70%25;
	max-height+:+70%25;
	margin+:+0;
	padding+:+0;

	/*+some+position+nudging+to+center+the+text+area+*/
	position+:+relative;
	left+:+15%25;
	top+:+15%25;
	
	/*+preserve+3d+prevents+blurring+sometimes+caused+by+the+text+centering+in+the+next+class+*/
	transform-style+:+preserve-3d;
	
	/*border+:+1px+solid+green;*/
}

/*+Circle+Text+-+the+appearance+of+the+text+within+the+circle+plus+vertical+centering+*/
.circle_text
{
	/*+change+font/size/etc+here+*/
	font:+11px+"Tahoma",+Arial,+Serif;	
	text-align+:+center;
	
	/*+vertical+centering+technique+*/
	position+:+relative;
	top+:+50%25;
	transform+:+translateY(-50%25);
}|code-block|syntax|javascript|98713|<div+class="circle_container">
	<div+class="circle_main">
		<div+class="circle_text_container">
			<div+class+=+"circle_text">
				Here+is+an+example+of+some+text+in+my+circle.
			</div>
		</div>
	</div>
</div>			|98714|98715|您可以取消对容器div上边框颜色的注释，以查看它是如何约束的。|98716|需要注意的是:如果你放了太多的文本，或者使用了太长的单词/不间断的文本，你仍然可以打破圆圈的界限。它仍然不适合完全未知的文本(如用户输入)，但当您模糊地知道需要存储的最大文本数量并相应地设置圆圈大小和字体大小时，效果最好。当然，你可以设置文本容器div来隐藏任何溢出，但这看起来可能是“坏的”，并且不能代替在设计中正确地考虑到最大尺寸。|98717|希望这对某些人有用！HTML/CSS不是我的主要学科，所以我相信它还可以改进！|98718|entityMap^0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Y|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|Z|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|10|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|11|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|J|7|12|8|@]|9|@]|A|$K|L]]|$1|O|3|G|5|6|7|13|8|@]|9|@]|A|$]]|$1|P|3|Q|5|6|7|14|8|@]|9|@]|A|$]]|$1|R|3|S|5|6|7|15|8|@]|9|@]|A|$]]|$1|T|3|U|5|6|7|16|8|@]|9|@]|A|$]]|$1|V|3|-4|5|6|7|17|8|@]|9|@]|A|$]]]|W|$]]

<p>For a web design I was recently given I had to solve the centered and unknown amount of text in a fixed circle issue and I thought I'd share the solution here for other people looking into circle/text combos.</p>

<p>The main issue I had was text would often break the bounds of the circle. To solve this I ended up using 4 divs. 
One rectangular container that specified the max (fixed) boundaries of the circle.
Inside that would be the div that draws the circle with its width and height set to 100% so changing the size of the parent changes the size of the actual circle.
Inside that would be another rectangular div which, using %'s, would create a text boundary area preventing any text leaving the circle (for the most part)
Then finally the actual div for the text and vertical centering.</p>

<p>It makes more sense as code:</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>/* Main Container -  this controls the size of the circle */
.circle_container
{
	width : 128px;
	height : 128px;
	margin : 0;
	padding : 0;
/*	border : 1px solid red; */
}

/* Circle Main draws the actual circle */
.circle_main
{
	width : 100%;
	height : 100%;
	border-radius : 50%;
	border : 2px solid black;	/* can alter thickness and colour of circle on this line */
	margin : 0;
	padding : 0;
}

/* Circle Text Container - constrains text area to within the circle */
.circle_text_container
{
	/* area constraints */
	width : 70%;
	height : 70%;
	max-width : 70%;
	max-height : 70%;
	margin : 0;
	padding : 0;

	/* some position nudging to center the text area */
	position : relative;
	left : 15%;
	top : 15%;
	
	/* preserve 3d prevents blurring sometimes caused by the text centering in the next class */
	transform-style : preserve-3d;
	
	/*border : 1px solid green;*/
}

/* Circle Text - the appearance of the text within the circle plus vertical centering */
.circle_text
{
	/* change font/size/etc here */
	font: 11px "Tahoma", Arial, Serif;	
	text-align : center;
	
	/* vertical centering technique */
	position : relative;
	top : 50%;
	transform : translateY(-50%);
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="circle_container"&gt;
	&lt;div class="circle_main"&gt;
		&lt;div class="circle_text_container"&gt;
			&lt;div class = "circle_text"&gt;
				Here is an example of some text in my circle.
			&lt;/div&gt;
		&lt;/div&gt;
	&lt;/div&gt;
&lt;/div&gt;			</code></pre>
</div>
</div>
</p>

<p>You can uncomment the border colours on the container divs to see how it constrains. </p>

<p>Things to be aware of:
You can still break the bounds of the circle if you put too much text in or use words/unbroken text that are too long. It's still not a good fit for completely unknown text (such as user input) but works best when you know vaguely what the largest amount of text you'll need to store is and set your circle size and font sizes accordingly. You can set the text container div to hide any overflow of course, but that may just look "broken" and is no replacement for actually accounting for max size properly in your design.</p>

<p>Hope this is useful to someone! HTML/CSS is not my main discipline so I'm sure it can be improved on!</p>


blocks|key|98754|text|对我来说，只有this+solution可以处理多行文本：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|98755|.circle-multiline+{
++++display:+table-cell;
++++height:+200px;
++++width:+200px;
++++text-align:+center;
++++vertical-align:+middle;
++++border-radius:+50%25;
++++background:+yellow;
}|code-block|syntax|javascript|98756|entityMap|0|LINK|mutability|MUTABLE|url|http://fuzzytolerance.info/blog/2015/05/12/putting-stuff-in-circles/^0|7|D|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

<p>For me, only <a href="http://fuzzytolerance.info/blog/2015/05/12/putting-stuff-in-circles/" rel="nofollow">this solution</a> worked for multiline text:</p>

<pre><code>.circle-multiline {
    display: table-cell;
    height: 200px;
    width: 200px;
    text-align: center;
    vertical-align: middle;
    border-radius: 50%;
    background: yellow;
}
</code></pre>


blocks|key|98795|text|一种方法是使用flexbox将文本居中对齐。我找到的方法如下：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|98796|HTML：|98797|<div+class="circle-without-text">
++<div+class="text-inside-circle">
++++The+text
++</div>
</div>|code-block|syntax|javascript|98798|CSS：|98799|.circle-without-text+{
++++border-radius:+50%25;
++++width:+70vh;
++++height:+70vh;
++++background-color:+red;
++++position:+relative;
+}

.text-inside-circle+{
++++position:+absolute;
++++top:+0;
++++bottom:+0;
++++width:+100%25;
++++display:+flex;
++++align-items:+center;
++++justify-content:+center;
+}|98800|这里是plnkr：https://plnkr.co/edit/EvWYLNfTb1B7igoc3TZx?p=preview|offset|length|98801|entityMap|0|LINK|mutability|MUTABLE|url|https://plnkr.co/edit/EvWYLNfTb1B7igoc3TZx?p=preview^0|0|0|0|0|0|9|1G|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Z|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|10|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|11|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|12|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|13|8|@]|9|@$O|14|P|15|1|16]]|A|$]]|$1|Q|3|-4|5|6|7|17|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|X]]]]

<p>One way to do it is to use flexbox in order to align the text on the middle.
The way I found to do it, is the following:</p>

<p>HTML:</p>

<pre><code>&lt;div class="circle-without-text"&gt;
  &lt;div class="text-inside-circle"&gt;
    The text
  &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>CSS:</p>

<pre><code>.circle-without-text {
    border-radius: 50%;
    width: 70vh;
    height: 70vh;
    background-color: red;
    position: relative;
 }

.text-inside-circle {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
 }
</code></pre>

<p>Here the plnkr: <a href="https://plnkr.co/edit/EvWYLNfTb1B7igoc3TZx?p=preview" rel="nofollow">https://plnkr.co/edit/EvWYLNfTb1B7igoc3TZx?p=preview</a></p>


blocks|key|98813|text|使用此代码，它也将具有响应能力。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|98814|<div+class="circle">ICON</div>

.circle+{
++position:+relative;
++display:+inline-block;
++width:+100%25;
++height:+0;
++padding:+50%25+0;
++border-radius:+50%25;
++/*+Just+making+it+pretty+*/
++-webkit-box-shadow:+0+4px+0+0+rgba(0,+0,+0,+0.1);
++box-shadow:+0+4px+0+0+rgba(0,+0,+0,+0.1);
++text-shadow:+0+4px+0+rgba(0,+0,+0,+0.1);
++background:+#38a9e4;
++color:+white;
++font-family:+Helvetica,+Arial+Black,+sans;
++font-size:+48px;
++text-align:+center;
}|code-block|syntax|javascript|98815|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Using this code it will be responsive also.</p>

<pre><code>&lt;div class="circle"&gt;ICON&lt;/div&gt;

.circle {
  position: relative;
  display: inline-block;
  width: 100%;
  height: 0;
  padding: 50% 0;
  border-radius: 50%;
  /* Just making it pretty */
  -webkit-box-shadow: 0 4px 0 0 rgba(0, 0, 0, 0.1);
  box-shadow: 0 4px 0 0 rgba(0, 0, 0, 0.1);
  text-shadow: 0 4px 0 rgba(0, 0, 0, 0.1);
  background: #38a9e4;
  color: white;
  font-family: Helvetica, Arial Black, sans;
  font-size: 48px;
  text-align: center;
}
</code></pre>


blocks|key|98827|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|98828|.circle+{
++width:+500px;
++height:+500px;
++border-radius:+50%25;
++font-size:+50px;
++color:+#fff;
++line-height:+500px;
++text-align:+center;
++background:+#000
}|code-block|syntax|javascript|98829|<div+class="circle">Hello+I+am+A+CircleHello+I+am+A+CircleHello+I+am+A+CircleHello+I+am+A+CircleHello+I+am+A+CircleHello+I+am+A+CircleHello+I+am+A+CircleHello+I+am+A+CircleHello+I+am+A+Circle</div>|98830|98831|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|M|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|I|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.circle {
  width: 500px;
  height: 500px;
  border-radius: 50%;
  font-size: 50px;
  color: #fff;
  line-height: 500px;
  text-align: center;
  background: #000
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="circle"&gt;Hello I am A CircleHello I am A CircleHello I am A CircleHello I am A CircleHello I am A CircleHello I am A CircleHello I am A CircleHello I am A CircleHello I am A Circle&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|315655|text|我综合了其他人的一些答案，然后用float和relative给出了我想要的结果。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|315656|在HTML中，我使用div。我在li中使用它作为导航栏。|315657|.large-list-style+{
++++float:+left;
++++position:+relative;
++++top:+-8px;

++++border-radius:+50%25;

++++margin-right:+8px;

++++background-color:+rgb(34,+198,+200);

++++font-size:+18px;
++++color:+white;
}
++++.large-list-style:before,
++++.large-list-style:after+{
++++++++content:+'\200B';
++++++++display:inline-block;
++++++++line-height:0;

++++++++padding-top:+50%25;
++++++++padding-bottom:+50%25;
++++}
++++.large-list-style:before+{
++++++++padding-left:+16px;
++++}
++++.large-list-style:after+{
++++++++padding-right:+16px;
++++}|code-block|syntax|javascript|315658|entityMap^0|G|5|M|8|0|G|2|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]|$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|T|8|@$9|U|A|V|B|C]]|D|@]|E|$]]|$1|H|3|I|5|J|7|W|8|@]|D|@]|E|$K|L]]|$1|M|3|-4|5|6|7|X|8|@]|D|@]|E|$]]]|N|$]]

<p>I was combining some answers from other people and with <code>float</code> and <code>relative</code> it gave me the result I needed.</p>

<p>In HTML I use a div. I use it inside a <code>li</code> for a navigation bar.</p>

<pre><code>.large-list-style {
    float: left;
    position: relative;
    top: -8px;

    border-radius: 50%;

    margin-right: 8px;

    background-color: rgb(34, 198, 200);

    font-size: 18px;
    color: white;
}
    .large-list-style:before,
    .large-list-style:after {
        content: '\200B';
        display:inline-block;
        line-height:0;

        padding-top: 50%;
        padding-bottom: 50%;
    }
    .large-list-style:before {
        padding-left: 16px;
    }
    .large-list-style:after {
        padding-right: 16px;
    }
</code></pre>


blocks|key|98882|text|这是从YouTube页面得到的，它有一个非常简单的设置。绝对可维护和可重用。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|98883|​|98884|.circle+{
++++position:+absolute;
++++top:+4px;
++++color:+white;
++++background-color:+red;
++++width:+18px;
++++height:+18px;
++++border-radius:+50%25;
++++line-height:+18px;
++++font-size:+10px;
++++text-align:+center;
++++cursor:+pointer;
++++z-index:+999;
}|code-block|syntax|javascript|98885|<div+class="circle">2</div>|98886|98887|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|P|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

<p>Got this from YouTube page which has a really simple set up. Absolutely maintainable and reusable. </p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.circle {
    position: absolute;
    top: 4px;
    color: white;
    background-color: red;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    line-height: 18px;
    font-size: 10px;
    text-align: center;
    cursor: pointer;
    z-index: 999;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="circle"&gt;2&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|98896|text|这里的一些解决方案对我来说在小圈子里效果不好。所以我用ol的绝对位置做了这个解决方案。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|98897|使用SASS将如下所示：|98898|.circle-text+{
++++position:+relative;
++++display:+block;
++++text-align:+center;
++++border-radius:+50%25;
++++>+.inner-text+{
++++++++display:+block;
++++++++@extend+.center-align;
++++}
}

.center-align+{
++++position:+absolute;
++++top:+50%25;
++++left:+50%25;
++++margin:+auto;
++++-webkit-transform:+translateX(-50%25)+translateY(-50%25);
++++-ms-transform:+translateX(-50%25)+translateY(-50%25);
++++transform:+translateX(-50%25)+translateY(-50%25);
}

@mixin+circle-text($size)+{
++++width:+$size;
++++height:+$size;
++++@extend+.circle-text;
}|code-block|syntax|javascript|98899|并且可以像这样使用|98900|#red-circle+{
++++background-color:+red;
++++border:+1px+solid+black;
++++@include+circle-text(50px);
}

#green-circle+{
++++background-color:+green;
++++border:+1px+solid+black;
++++@include+circle-text(150px);
}|98901|查看https://codepen.io/matheusrufca/project/editor/DnYPMK上的演示|offset|length|98902|请参阅代码片段以查看输出CSS|98903|​|98904|.circle-text+{
++position:+relative;
++display:+block;
++border-radius:+50%25;
++text-align:+center;
++min-width:+50px;
++min-height:+50px;
}

.center-align+{
++position:+absolute;
++top:+50%25;
++left:+50%25;
++margin:+auto;
++-webkit-transform:+translateX(-50%25)+translateY(-50%25);
++-ms-transform:+translateX(-50%25)+translateY(-50%25);
++transform:+translateX(-50%25)+translateY(-50%25);
}|98905|<div+id="red-circle"+class="circle-text">
++<span+class="inner-text+center-align">Hey</span>
</div>

<div+id="green-circle"+class="circle-text">
++<span+class="inner-text+center-align">Big+size+circle</span>
++<div>
++++<style>
++++++#red-circle+{
++++++++background-color:+red;
++++++++border:+1px+solid+black;
++++++++width:+60px;
++++++++height:+60px;
++++++}
++++++
++++++#green-circle+{
++++++++background-color:+green;
++++++++border:+1px+solid+black;
++++++++width:+150px;
++++++++height:+150px;
++++++}
++++</style>|98906|98907|entityMap|0|LINK|mutability|MUTABLE|url|https://codepen.io/matheusrufca/project/editor/DnYPMK^0|0|0|0|0|0|2|1H|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|17|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|18|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|19|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|1A|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|1B|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|1C|8|@]|9|@$O|1D|P|1E|1|1F]]|A|$]]|$1|Q|3|R|5|6|7|1G|8|@]|9|@]|A|$]]|$1|S|3|T|5|6|7|1H|8|@]|9|@]|A|$]]|$1|U|3|V|5|F|7|1I|8|@]|9|@]|A|$G|H]]|$1|W|3|X|5|F|7|1J|8|@]|9|@]|A|$G|H]]|$1|Y|3|T|5|6|7|1K|8|@]|9|@]|A|$]]|$1|Z|3|-4|5|6|7|1L|8|@]|9|@]|A|$]]]|10|$11|$5|12|13|14|A|$15|16]]]]

<p>Some of solutions here didn't work well for me on small circles. So I made this solution using ol absolute position.</p>

<p>Using SASS will look like this:</p>

<pre><code>.circle-text {
    position: relative;
    display: block;
    text-align: center;
    border-radius: 50%;
    &gt; .inner-text {
        display: block;
        @extend .center-align;
    }
}

.center-align {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: auto;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}

@mixin circle-text($size) {
    width: $size;
    height: $size;
    @extend .circle-text;
}
</code></pre>

<p>And can be used like </p>

<pre><code>#red-circle {
    background-color: red;
    border: 1px solid black;
    @include circle-text(50px);
}

#green-circle {
    background-color: green;
    border: 1px solid black;
    @include circle-text(150px);
}
</code></pre>

<p>See demo on <a href="https://codepen.io/matheusrufca/project/editor/DnYPMK" rel="nofollow noreferrer">https://codepen.io/matheusrufca/project/editor/DnYPMK</a></p>

<p>See the snippet to view output CSS</p>

<p><div class="snippet" data-lang="js" data-hide="true" data-console="false" data-babel="false">
<div class="snippet-code snippet-currently-hidden">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.circle-text {
  position: relative;
  display: block;
  border-radius: 50%;
  text-align: center;
  min-width: 50px;
  min-height: 50px;
}

.center-align {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: auto;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="red-circle" class="circle-text"&gt;
  &lt;span class="inner-text center-align"&gt;Hey&lt;/span&gt;
&lt;/div&gt;

&lt;div id="green-circle" class="circle-text"&gt;
  &lt;span class="inner-text center-align"&gt;Big size circle&lt;/span&gt;
  &lt;div&gt;
    &lt;style&gt;
      #red-circle {
        background-color: red;
        border: 1px solid black;
        width: 60px;
        height: 60px;
      }
      
      #green-circle {
        background-color: green;
        border: 1px solid black;
        width: 150px;
        height: 150px;
      }
    &lt;/style&gt;</code></pre>
</div>
</div>
</p>


blocks|key|315737|text|使用CSS可以很容易地在数字周围添加圆圈。这可以使用border-radius属性来完成。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|315738|在这里，我们还使用了设置为"inline-+block“的display属性来将元素表示为内联级别的块容器。|315739|++span.circle+{
++background:+#010101;
++border-radius:+50%25;
++-moz-border-radius:+50%25;
++-webkit-border-radius:+50%25;
++color:+#f1f1f1;
++display:+inline-block;
++font-weight:+bold;
++line-height:+40px;
++margin-right:+5px;
++text-align:+center;
++width:+40px;
}|code-block|syntax|javascript|315740|+<span+class="circle">1</span>|315741|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|O|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|P|8|@]|9|@]|A|$G|H]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>Adding a circle around a number can be easily done with CSS. This can be done using the border-radius property.</p>
<p>Here, we also used the display property set to &quot;inline-block&quot; to represent the element as an inline-level block container.</p>
<pre class="lang-css prettyprint-override"><code>  span.circle {
  background: #010101;
  border-radius: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  color: #f1f1f1;
  display: inline-block;
  font-weight: bold;
  line-height: 40px;
  margin-right: 5px;
  text-align: center;
  width: 40px;
}
</code></pre>
<pre class="lang-html prettyprint-override"><code> &lt;span class=&quot;circle&quot;&gt;1&lt;/span&gt;
</code></pre>


blocks|key|98973|text|使用此方法可以将文本放在圆圈内|type|unstyled|depth|inlineStyleRanges|entityRanges|data|98974|​|98975|.cir+{
++width:+400px;
++height:+400px;
++background:+linear-gradient(to+right,+blue,+orange);/*important*/
++border-radius:+50%25;
++display:+flex;
++justify-content:+center;
++align-items:+center;
++font-size:+50px;/*no+need*/
++color:+white;/*no+need*/
++font-family:+Arial;/*no+need*/
++border:+15px+solid+red;/*no+need*/
++user-select:+none;/*no+need*/
}|code-block|syntax|javascript|98976|<div+class="cir">hello+world</div>|98977|98978|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|P|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

<p>do this method you can make the text inside a circle</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.cir {
  width: 400px;
  height: 400px;
  background: linear-gradient(to right, blue, orange);/*important*/
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 50px;/*no need*/
  color: white;/*no need*/
  font-family: Arial;/*no need*/
  border: 15px solid red;/*no need*/
  user-select: none;/*no need*/
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="cir"&gt;hello world&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|315784|text|HTML：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|315785|<div+class="circle">
++++++++<p+class="inner">HELLO</p>
++++</div>|code-block|syntax|javascript|315786|CSS：|315787|.circle+{+
background-color:+darkgoldenrod;
height:+500px;+width:+500px;+
border-radius:+50%25;}

.inner+{
++++position:+relative;
++++top:+50%25;
++++text-align:+center;
++++line-height:+0px;
+
}|315788|第一个div类指示正在绘制的圆，您可以更改高度和宽度以适合您的使用。|315789|内部类表示文本的位置，使用position+relative允许文本停留在圆圈中。|315790|前50%25将其垂直居中，文本对齐将其水平居中。值为0的线条高度只会使它更清晰或更准确。|315791|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|W|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|X|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|Y|8|@]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

<p>HTML:</p>
<pre><code>&lt;div class=&quot;circle&quot;&gt;
        &lt;p class=&quot;inner&quot;&gt;HELLO&lt;/p&gt;
    &lt;/div&gt;

</code></pre>
<p>CSS:</p>
<pre><code>.circle { 
background-color: darkgoldenrod;
height: 500px; width: 500px; 
border-radius: 50%;}

.inner {
    position: relative;
    top: 50%;
    text-align: center;
    line-height: 0px;
 
}
</code></pre>
<p>The first div class indicates the circle being drawn, you can change the height and width to fit your use.</p>
<p>The inner class represents the location of the text, using position relative allows the text to stay in the circle.</p>
<p>The top 50% centers it vertically, and the text-align centers it horizontally. The line height at 0 just makes it a little crisper or more accurate.</p>


<p>I found this example on stackoverflow:</p>

<p><a href="https://stackoverflow.com/questions/6936972/draw-circle-using-css-alone">Draw Circle using css alone</a></p>

<p>Which is great.  But I'd like to know how to modify that example so that I can include text in the middle of the circle?</p>

<p>I also found this:  <a href="https://stackoverflow.com/questions/4801181/vertically-and-horizontally-centering-text-in-circle-in-css-like-iphone-notific">Vertically and horizontally centering text in circle in CSS (like iphone notification badge)</a></p>

<p>but for some reason, its not working for me.  When I create the following test code: </p>

<pre><code>&lt;div class="badge"&gt;1&lt;/div&gt;
</code></pre>

<p>instead of a circle, I get a oval shape.
I'm trying to play around with the code to see how I can get it to work.</p>


How to draw a circle with text in the middle?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我在stackoverflow上找到了这个例子：这是很棒的。但是我想知道如何修改这个示例，以便在圆圈中间包含文本？我还发现了这个：但出于某些原因，它对我不起作用。当我创建以下测试代码时：<div class="badge">1</div>我得到的不是一个圆形，而是一个椭圆形。我正在尝试修改代码，看看如何才能让它正常工作...

问如何画一个中间有文字的圆圈？
EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何画一个中间有文字的圆圈？EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何画一个中间有文字的圆圈？
EN