文本和标签以CSS圈为中心

Question

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

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

我怎样才能做到这一点？

Answer 1

您可以使用flexbox。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 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推送数字并将其垂直居中。