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

  • Z时代
  • 2024-01-10
  • 分类：问答

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

单独使用CSS绘制圆

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

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

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

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

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

回答：

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

以上是 CSS：如何在中间绘制带有文字的圆圈？ 的全部内容， 来源链接： utcz.com/qa/436071.html

回到顶部