以 CSS 圆圈为中心的文本和标签答案

【问题标题】：Text and label centered in CSS circle以 CSS 圆圈为中心的文本和标签
【发布时间】：2017-08-09 03:20:28
【问题描述】：

我正在尝试在 CSS 中创建类似于以下内容的内容：

+2 在圆圈中水平和垂直居中，DEX 在+2 下方水平居中。

我怎样才能做到这一点？

【问题讨论】：

你在构建什么 RPG 工具？
我正在编写一个开源 Web 应用程序来管理 Dungeon World 角色表。
谢谢。 Dungeon World 看起来像是回到了有趣的 D&D 版本。
地下城世界注重讲故事，注重机制。我刚开始玩，但玩得很开心。
我需要回去玩，这看起来像是要尝试的东西。再次感谢。

标签： css text-alignment

【解决方案1】：

您可以为此使用 flexbox。

.circle {
  /* circle styles */
  width: 100px;
  height: 100px;
  border: 1px solid #222;
  border-radius: 50%;
  
  /* become a flex container */
  /* its children will be flex items */
  display: flex;
  /* place items in column */
  flex-direction: column;
  /* center flex items horizontally */
  align-items: center;
  /* center all content vertically */
  justify-content: center;
}

/* simulate one more item to "balance" dex text */
.circle:before {
  content: "\A0";
  visibility: hidden;
}

<div class="circle">
  <div class="number">+2</div>
  <div class="text">dex</div>
</div>

【讨论】：

这很好用。我在我的 web 应用程序的其余部分广泛使用 flexbox。

【解决方案2】：

一个简单的解决方案是使用line-height 来控制文本的垂直对齐方式，但是当用于调整默认行高的全局样式时，这会变得不可靠。

所以，我建议使用以下更清洁、更易于管理的解决方案：

.circle{
  width: 60px;
  height: 48px;
  border: 1px solid #000;
  background: #fff;
  text-align: center;
  border-radius: 100%;
  font-size: 24px;
  line-height: 16px;
  padding-top: 14px;
}
.circle span{
  font-size: 14px;
  text-transform: uppercase;
  margin-top: 
  display: block;
}

<div class="circle">
  +12
  <span>dex</span>
</div>

HTML：使用.circle 元素作为实际的圆圈，并包含数字和包含标签的<span> 元素。

CSS：使用line-height 控制标签和数字之间的间距，我使用padding-top 推动数字并将其垂直居中。

【讨论】：