CSS：如何在中间绘制带有文字的圆圈？

小编典典

CSS：如何在中间绘制带有文字的圆圈？

css

我在stackoverflow上找到了以下示例：

单独使用CSS绘制圆

太好了但是我想知道如何修改该示例，以便可以在圆圈中间添加文本？

我还发现了这一点：[在CSS中以圆形为中心垂直和水平居中放置文本（例如iphone通知徽章）

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

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

取而代之的是椭圆形。我正在尝试使用代码，以查看如何使它工作。

阅读 2869

2020-05-16

共1个答案

小编典典

.circle {

  width: 500px;

  height: 500px;

  border-radius: 50%;

  font-size: 50px;

  color: #fff;

  line-height: 500px;

  text-align: center;

  background: #000

}


<div class="circle">Hello I am A Circle</div>

2020-05-16