如何画一个中间有文字的圆圈？

小编典典

如何画一个中间有文字的圆圈？

all

这是伟大的。但我想知道如何修改该示例，以便我可以在圆圈中间包含文本？

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

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

我得到的是椭圆形，而不是圆形。我正在尝试使用代码，看看如何让它工作。

阅读 108

2022-07-27

共1个答案

小编典典

设置line-height与 div 高度相同的值将显示垂直居中的一行文本。在此示例中，高度和行高为 500 像素。

例子

JSFiddle

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

2022-07-27