在内联块中使用vertical-align对齐图标

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

试试吧：

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>

Answer 2

当我使用标尺测量时，它看起来像vertical-align: middle表现正确：它位于小写字母的中间。

如果您希望它“完美”，那么您可能需要更加精确。有很多想法，一个很快就是：

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

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

Answer 3

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

将元素的中间与基线加上parent.ref的x高度的一半对齐

这是一个图示，显示元素的中间与基线对齐加上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>