如何画一个中间有文字的圆圈？
我在stackoverflow上找到了这个例子：
这是很棒的。但是我想知道如何修改这个示例，以便在圆圈中间包含文本？
我还发现了这个：Vertically and horizontally centering text in circle in CSS (like iphone notification badge)
但出于某些原因，它对我不起作用。当我创建以下测试代码时：
<div class="badge">1</div>我得到的不是一个圆形，而是一个椭圆形。我正在尝试修改代码，看看如何才能让它正常工作。
回答 17
Stack Overflow用户
发布于 2013-05-18 02:23:13
将line-height设置为与div高度相同的值将显示一行垂直居中的文本。在这个例子中，高度和行高是500px。
示例
.circle {
width: 500px;
height: 500px;
line-height: 500px;
border-radius: 50%;
font-size: 50px;
color: #fff;
text-align: center;
background: #000
}<div class="circle">Hello I am A Circle</div>
Stack Overflow用户
发布于 2013-05-18 02:30:59
如果你的内容要换行并且高度未知，这是你最好的选择：
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>
Stack Overflow用户
发布于 2016-03-06 01:26:47
在最近的网页设计中，我被要求在一个固定的圆圈问题中解决居中和未知数量的文本，我想我应该在这里分享这个解决方案给其他正在研究圆圈/文本组合的人。
我遇到的主要问题是，文本经常会打破圆圈的界限。为了解决这个问题，我最终使用了4个div。一个矩形容器，用于指定圆的最大(固定)边界。里面是div，用来绘制宽度和高度设置为100%的圆，因此更改父对象的大小会改变实际圆的大小。里面是另一个矩形div，使用%s，它将创建一个文本边界区域，防止任何文本离开圆圈(大部分情况下)，最后是文本的实际div和垂直居中。
作为代码，它更有意义：
/* 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>
您可以取消对容器div上边框颜色的注释，以查看它是如何约束的。
需要注意的是:如果你放了太多的文本，或者使用了太长的单词/不间断的文本，你仍然可以打破圆圈的界限。它仍然不适合完全未知的文本(如用户输入)，但当您模糊地知道需要存储的最大文本数量并相应地设置圆圈大小和字体大小时，效果最好。当然，你可以设置文本容器div来隐藏任何溢出，但这看起来可能是“坏的”，并且不能代替在设计中正确地考虑到最大尺寸。
希望这对某些人有用！HTML/CSS不是我的主要学科，所以我相信它还可以改进！
https://stackoverflow.com/questions/16615403
复制相似问题