css：如何在中间绘制文本圆圈？ [英] css: how to draw circle with text in middle?

问题描述

我在stackoverflow上找到这个例子：

I found this example on stackoverflow:

使用css单独绘制圆形

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

Which is great. But I'd like to know how to modify that example so that I can include text in the middle of the circle?

我还发现这个：在CSS中以圆形垂直和水平居中文本（如iphone通知徽章）

但由于某种原因，它不适合我。当我创建以下测试代码时：

but for some reason, its not working for me. When I create the following test code:

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

而不是圆形，我得到一个椭圆形。

instead of a circle, I get a oval shape. I'm trying to play around with the code to see how I can get it to work.

推荐答案

.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：如何在中间绘制文本圆圈？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！