文本和标签以 CSS 圆为中心

Question

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

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

我怎样才能做到这一点？

Answer 1

一个简单的解决方案是使用 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 来推动数字并将其垂直居中。

Answer 2

你可以为此使用 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>

文本和标签以 CSS 圆为中心

Text and label centered in CSS circle

css

text-alignment