Question

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

CODE

.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中测试），但您需要在CSS中使用span .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>

Answer 2

就字体而言，你的加号实际上是垂直居中的。加号的底部与框基线对齐 - 但您看不到的是顶线。如果您将加号更改为大写字母，例如B，您将看到我的意思。

请查看此文章以获得深入的解释：http://christopheraue.net/2014/03/05/vertical-align/

将圆圈内的加号垂直居中

2 个答案:

段：