Центрирующий значок с вертикальным выравниванием во встроенном блоке

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

Когда я использую линейку для измерения, похоже, что vertical-align: middle ведет себя правильно: она находится в середине строчных букв.

Если вы хотите, чтобы оно было «идеальным», возможно, вам нужно быть более точным. Есть много идей, одна быстрая:

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

Подробнее о вертикальном выравнивании встроенных элементов здесь: https://css -tricks.com / almanac / properties / v / вертикальное выравнивание /

Answer 2

Это на самом деле посередине, но вам нужно знать, что это за середина.

Выравнивает середину элемента с базовой линией плюс половина высоты 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, и вы окажетесь ближе к 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>

Answer 3

Попробуйте:

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>