css：如何在中间绘制带有文本的圆圈？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16615403/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
css: how to draw circle with text in middle?
提问by dot
I found this example on stackoverflow:
我在stackoverflow上找到了这个例子：
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?
这很棒。但是我想知道如何修改该示例以便我可以在圆圈中间包含文本？
I also found this: Vertically and horizontally centering text in circle in CSS (like iphone notification badge)
我还发现了这一点： 在 CSS 中垂直和水平居中文本（如 iphone 通知徽章）
but for some reason, its not working for me. When I create the following test code:
但出于某种原因，它对我不起作用。当我创建以下测试代码时：
<div class="badge">1</div>
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.
我得到一个椭圆形而不是圆形。我正在尝试使用代码来查看如何让它工作。
回答by Jawad
回答by cimmanon
If your content is going to wrap and be of unknown height, this is your best bet:
如果您的内容要环绕并且高度未知，这是您最好的选择：
http://cssdeck.com/labs/aplvrmue
http://cssdeck.com/labs/aplvrmue
.badge {
height: 100px;
width: 100px;
display: table-cell;
text-align: center;
vertical-align: middle;
border-radius: 50%; /* may require vendor prefixes */
background: yellow;
}
.badge {
height: 100px;
width: 100px;
display: table-cell;
text-align: center;
vertical-align: middle;
border-radius: 50%;
background: yellow;
}<div class="badge">1</div>回答by Mohammad Usman
You can use css3 flexbox.
您可以使用 css3 flexbox。
HTML:
HTML：
<div class="circle-with-text">
Here is some text in circle
</div>
CSS:
CSS：
.circle-with-text {
justify-content: center;
align-items: center;
border-radius: 100%;
text-align: center;
display: flex;
}
This will allow you to have vertically and horizontally middle aligned single line and multi-line text.
这将允许您具有垂直和水平居中对齐的单行和多行文本。
body {
margin: 0;
}
.circles {
display: flex;
}
.circle-with-text {
background: linear-gradient(orange, red);
justify-content: center;
align-items: center;
border-radius: 100%;
text-align: center;
margin: 5px 20px;
font-size: 15px;
padding: 15px;
display: flex;
height: 180px;
width: 180px;
color: #fff;
}
.multi-line-text {
font-size: 20px;
}<div class="circles">
<div class="circle-with-text">
Here is some text in circle
</div>
<div class="circle-with-text multi-line-text">
Here is some multi-line text in circle
</div>
</div>回答by Mohammad Usman
I think you want to write text in an oval or circle? why not this one?
我认为您想在椭圆形或圆形中书写文本？为什么不是这个？
<span style="border-radius:50%; border:solid black 1px;padding:5px">Hello</span>回答by Ashish
Draw a circle with text in middle with HTML Tag and without CSS
使用 HTML 标签和不使用 CSS 绘制一个中间带有文本的圆圈
HTML having SVG tag for this. You can follow this standard approach if you don't want to go for CSS.
为此，HTML 具有 SVG 标记。如果您不想使用 CSS，则可以遵循此标准方法。
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="white" />
Sorry, your browser does not support inline SVG.
<text fill="#000000" font-size="18" font-family="Verdana"
x="15" y="60">ASHISH</text>
</svg>
回答by David Burford
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.
对于最近的网页设计，我必须解决固定圆圈问题中居中且未知数量的文本，我想我会在这里分享解决方案，供其他人查看圆圈/文本组合。
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.
我遇到的主要问题是文本经常会打破圆圈的界限。为了解决这个问题，我最终使用了 4 个 div。一个矩形容器，指定了圆的最大（固定）边界。里面将是绘制圆的 div，其宽度和高度设置为 100%，因此更改父级的大小会更改实际圆的大小。里面是另一个矩形 div，它使用 %'s，将创建一个文本边界区域，防止任何文本离开圆圈（大多数情况下）然后最后是文本的实际 div 和垂直居中。
It makes more sense as 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%);
}<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> You can uncomment the border colours on the container divs to see how it constrains.
您可以取消注释容器 div 上的边框颜色以查看它是如何约束的。
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.
需要注意的事情：如果您放入太多文本或使用太长的单词/完整文本，您仍然可以打破圆圈的界限。它仍然不适合完全未知的文本（例如用户输入），但是当您模糊地知道需要存储的最大文本量是多少并相应地设置圆圈大小和字体大小时，它的效果最佳。当然，您可以将文本容器 div 设置为隐藏任何溢出，但这可能看起来“已损坏”并且不能替代在您的设计中正确考虑最大尺寸的实际情况。
Hope this is useful to someone! HTML/CSS is not my main discipline so I'm sure it can be improved on!
希望这对某人有用！HTML/CSS 不是我的主要学科，所以我相信它可以改进！
回答by Ligth
Of course, you have to use to tags to do that. One to create the circle and other for the text.
当然，你必须使用 to 标签来做到这一点。一个用于创建圆圈，另一个用于文本。
Here some code may help you
这里有一些代码可以帮助你
#circle {
background: #f00;
width: 200px;
height: 200px;
border-radius: 50%;
color:black;
}
.innerTEXT{
position:absolute;
top:80px;
left:60px;
}
<div id="circle">
<span class="innerTEXT"> Here a text</span>
</div>
Live example here http://jsbin.com/apumik/1/edit
现场示例http://jsbin.com/apumik/1/edit
Update
更新
Here less smaller with a few changes
这里不那么小，有一些变化
回答by Bruno Gomes
If it's only one line of text you could use the line-height property, with the same value as the element height:
如果只有一行文本，您可以使用 line-height 属性，其值与元素高度相同：
height:100px;
line-height:100px;
If the text has multiple lines, or if the content is variable, you could use the padding-top:
如果文本有多行，或者内容是可变的，则可以使用 padding-top：
padding-top:30px;
height:70px;
Example: http://jsfiddle.net/2GUFL/
回答by MagicJoseph
If you are using Foundation 5 and Compass framework, you can try this.
如果你使用的是 Foundation 5 和 Compass 框架，你可以试试这个。
.sass input
.sass 输入
$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;
}
.css output
.css 输出
.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%;
}
回答by Damjan Pavlica
For me, only this solutionworked for multiline text:
对我来说，只有这个解决方案适用于多行文本：
.circle-multiline {
display: table-cell;
height: 200px;
width: 200px;
text-align: center;
vertical-align: middle;
border-radius: 50%;
background: yellow;
}
