如何将 CSS 创建的圆内的文本居中？

修改 CSS 圆形以包含居中文本

您找到了一个单独使用 CSS 绘制圆形的示例。但是，您现在寻求修改它以在中心包含文本。

首先，尝试此解决方案：

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

不幸的是，这可能会导致椭圆形而不是椭圆形一个圆。

解决方案

垂直居中文本，将 line-height 设置为与 div 的高度相同的值。在上面的示例中，高度和行高均设置为 500px。

.circle {
  width: 500px;
  height: 500px;
  line-height: 500px; /* Vertically center the text */
  border-radius: 50%;
  font-size: 50px;
  color: #fff;
  text-align: center;
  background: #000;
}

此修改可确保文本在圆圈内居中显示。

以上是如何将 CSS 创建的圆内的文本居中？的详细内容。更多信息请关注PHP中文网其他相关文章！