css - 内联 block 中带有垂直对齐的居中图标

Question

我不明白为什么 vertical-align: middle 使图标不居中，而是稍低一些。

HTML:

<ul class="operatorscreen__buttons">
  <li class="operatorscreen__single-button">
    <a class="operatorscreen__link button-link button-block button-link_outline" href="#">First icon</a>
  </li>
  <li class="operatorscreen__single-button">
    <a class="operatorscreen__link button-link button-block button-link_outline" href="#">Second</a>
  </li>
</ul>

CSS:

.operatorscreen {
    &__single-button {
      &:first-child {
        margin-bottom: 10px;
      }
    }

    &__link {
    color: black;
    text-decoration: none;
    font-size: 18px;

    &:before {
      content: "";
      display: inline-block;
      width: 16px;
      height: 20px;
      font-size: 100px;
      margin-right: 12px;
      vertical-align: middle;
      background-color: red;
    }

  }
}

如您所见，红色背景略低于文本，但它应该垂直居中。

Answer 1

试一试:

li:not(:last-child) {
  margin-bottom: 10px;
}

li::before {
  content: '';
  width: 16px;
  height: 20px;
  display: inline-block;
  vertical-align: sub;
  background-color: red;
}

<ul>
  <li>First icon</li>
  <li>Second icon</li>
</ul>