html - 在圆圈内垂直居中加号

Question

我试图将加号在圆圈内垂直和水平居中。我试过使用 line-height，但这似乎不起作用:

代码

.circle {
  font-size: 3.27rem;
  font-weight: 400;
  width: 94px;
  border-radius: 50%;
  color: white;
  line-height: 94px;
  text-align: center;
  padding: 0;
  height: 94px;
  margin: 0 auto;
  box-shadow: 0px 2px 5px rgba(94, 94, 94, 0.68);
  cursor: pointer;
  background: #fcce00;
  position: absolute;
  right: 50px;
  z-index: 10;
  span {
    line-height: 94px;
  }
}

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

Answer 1

尽管您的代码似乎可以按照您的意愿工作(在 FF 中测试)，但您需要将 span 从 CSS 中的 .circle 中取出，因为这不是预处理器 CSS，因此不是有效的 CSS。

片段:

.circle {
  font-size: 3.27rem;
  font-weight: 400;
  width: 94px;
  border-radius: 50%;
  color: white;
  line-height: 94px;
  text-align: center;
  padding: 0;
  height: 94px;
  margin: 0 auto;
  box-shadow: 0px 2px 5px rgba(94, 94, 94, 0.68);
  cursor: pointer;
  background: #fcce00;
  position: absolute;
  right: 50px;
  z-index: 10;
}
span {
  line-height: 94px;
}

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