Css 如何在中间画一个圆圈？

我在stackoverflow上发现了以下示例：

这很好。但是我想知道如何修改这个例子，这样我就可以在圆圈中间包含文本了？< /P> 我还发现：

但出于某种原因，它对我不起作用。当我创建以下测试代码时：

<div class="badge">1</div>

1

我得到的不是圆形，而是椭圆形。

---

我正在尝试使用代码，看看如何让它工作。

当然，您必须使用to标记来完成这项工作。一个用于创建圆，另一个用于文本

这里有一些代码可以帮助您

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

#圆圈{
背景：#f00；
宽度：200px；
高度：200px；
边界半径：50%；
颜色：黑色；
}
.innerTEXT{
位置：绝对位置；
顶部：80px；
左：60px；
}
这里有一段文字

这里有一个活生生的例子

更新

这里稍微小一点，稍作改动

---

如果只有一行文本，则可以使用与元素高度值相同的line height属性：

height:100px;
line-height:100px;

如果文本有多行，或者内容是可变的，则可以使用顶部填充：

padding-top:30px;
height:70px;

---

示例：

我想你想把文字写成椭圆形还是圆形？为什么不是这个

---

Hello

设置

行高

与div高度相同的值将显示垂直居中的一行文本。在本例中，高度和线条高度为500px

例子

.circle{
宽度：500px；
高度：500px；
线高：500px；
边界半径：50%；
字体大小：50px；
颜色：#fff；
文本对齐：居中；
背景：#000
}

---

您好，我是一个圆圈

如果您的内容将被包装并且高度未知，这是您的最佳选择：

.badge{
高度：100px；
宽度：100px；
显示：表格单元格；
文本对齐：居中；
垂直对齐：中间对齐；
边界半径：50%；
背景：黄色；
}

---

<代码> 1

如果您使用的是基础5和罗盘框架，您可以试试这个。 .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输出

.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%;
}

---

对于一个网页设计，我最近被告知，我必须解决一个固定圆圈中以中心和未知数量的文本问题，我想我应该在这里为其他研究圆圈/文本组合的人分享这个解决方案

我遇到的主要问题是文本经常会打破圆圈的界限。为了解决这个问题，我最终使用了4个div。 一个矩形容器，用于指定圆的最大（固定）边界。 里面是绘制圆的div，其宽度和高度设置为100%，因此更改父对象的大小会更改实际圆的大小。 在这里面是另一个矩形div，它使用%创建一个文本边界区域，防止任何文本离开圆（大多数情况下） 最后是文本和垂直居中的实际div

作为代码，它更有意义：

/*主容器-控制圆的大小*/
.circle_容器
{
宽度：128px；
高度：128px；
保证金：0；
填充：0；
/*边框：1px纯红*/
}
/*Circle Main绘制实际的圆*/
.圆èmain
{
宽度：100%；
身高：100%；
边界半径：50%；
边框：2倍纯黑；/*可以改变这条线上圆圈的厚度和颜色*/
保证金：0；
填充：0；
}
/*圆形文本容器-将文本区域限制在圆形内*/
.circle\u text\u容器
{
/*面积限制*/
宽度：70%；
身高：70%；
最大宽度：70%；
最大高度：70%；
保证金：0；
填充：0；
/*某些位置轻推以使文本区域居中*/
位置：相对位置；
左：15%；
最高：15%；
/*“保留三维”（preserve 3d）可防止有时由于下一个类中的文本居中而导致的模糊*/
变换样式：保留-3d；
/*边框：1px纯绿色*/
}
/*圆圈文字-圆圈内文字的外观加上垂直居中*/
.圈出文本
{
/*在此处更改字体/大小/等*/
字体：11px“Tahoma”，Arial，衬线；
文本对齐：居中；
/*垂直定心技术*/
位置：相对位置；
最高：50%；
转化：translateY（-50%）；
}

下面是我圈子里的一些文本的一个例子。

对于我来说，仅适用于多行文本：

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

---

一种方法是使用flexbox对齐中间的文本。 我发现的方法如下：

HTML:

---

这里的plnkr:

使用此代码，它也将响应

<div class="circle">ICON</div>

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

图标
.圆圈{
位置：相对位置；
显示：内联块；
宽度：100%；
身高：0；
填充：50%0；
边界半径：50%；
/*只是让它变得漂亮而已*/
-webkit盒阴影：0 4px 0 rgba（0,0,0,0.1）；
盒影：0 4px 0 rgba（0,0,0,0.1）；
文本阴影：0 4px0 rgba（0,0,0,0.1）；
背景：#38a9e4；
颜色：白色；
字体系列：Helvetica，Arial黑色，sans；
字体大小：48px；
文本对齐：居中；
}

您可以使用css3

HTML:

<div class="circle-with-text">
    Here is some text in circle
</div>

.circle-with-text {
  justify-content: center;
  align-items: center;
  border-radius: 100%;
  text-align: center;
  display: flex;
}

这将允许您具有垂直和水平的中间对齐的单行和多行文本

正文{
保证金：0；
}
.圆圈{
显示器：flex；
}
.用文字圈出{
背景：线性梯度（橙色、红色）；
证明内容：中心；
对齐项目：居中；
边界半径：100%；
文本对齐：居中；
利润率：5px20px；
字体大小：15px；
填充：15px；
显示器：flex；
高度：180像素；
宽度：180px；
颜色：#fff；
}
.多行文字{
字体大小：20px；
}

这里有一些圆圈里的文字
下面是一些圆圈中的多行文字

.circle{
宽度：500px；
高度：500px；
边界半径：50%；
字体大小：50px；
颜色：#fff；
线高：500px；
文本对齐：居中；
背景：#000
}

---

你好，我是一个圈，我是一个圈，我是一个圈，我是一个圈，我是一个圈，我是一个圈，我是一个圈，我是一个圈，我是一个圈

我将其他人的一些答案与

float

A组合在一起

<div class="circle">ICON</div>

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

<div class="circle-with-text">
    Here is some text in circle
</div>

.circle-with-text {
  justify-content: center;
  align-items: center;
  border-radius: 100%;
  text-align: center;
  display: flex;
}

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

.circle-text {
    position: relative;
    display: block;
    text-align: center;
    border-radius: 50%;
    > .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;
}

#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);
}

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