内联块中带有垂直对齐的居中图标

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>

scss：

.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

尝试一下：

style

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

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

Answer 2

当我使用尺子进行测量时，看起来vertical-align: middle的行为正确：它位于小写字母的中间。

如果您希望它“完美”，则可能需要更精确。有很多想法，一种是快速的：

position: relative;
top: -1px; // adjust to your desire

更多有关内联元素垂直对齐的信息：https://css-tricks.com/almanac/properties/v/vertical-align/

Answer 3

它实际上在中间，但是您需要知道什么是中间。

  

将元素的中间与基线加父元素的x高度的一半对齐。 ^ref

以下是说明元素的中间与基线对齐以及x-height的一半的说明。

.operatorscreen__single-button:first-child {
  margin-bottom: 10px;
}

.operatorscreen__link {
  color: black;
  text-decoration: none;
  font-size: 18px;
  background: 
    /*plus half x-height*/
    linear-gradient(green,green) 0 calc(16px - 0.5ex)/100% 1px no-repeat,
    /*the baseline*/
    linear-gradient(#000,#000)0 16px/100% 1px no-repeat;
}

.operatorscreen__link:before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 20px;
  font-size: 100px;
  margin-right: 12px;
  vertical-align: middle;
  background:
    linear-gradient(#000,#000) center/100% 1px no-repeat;
  background-color: red;
}

<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>

在您的特定情况下，使用top（或text-top，text-bottom，sub）而不是middle，您会更接近您期望的

.operatorscreen__single-button:first-child {
  margin-bottom: 10px;
}

.operatorscreen__link {
  color: black;
  text-decoration: none;
  font-size: 18px;
  background: linear-gradient(#000,#000)center/100% 1px no-repeat;
}

.operatorscreen__link:before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 20px;
  font-size: 100px;
  margin-right: 12px;
  vertical-align: top;
  background:linear-gradient(#000,#000) center/100% 1px no-repeat;
  background-color: red;
}

<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>