вертикальное выравнивание и CSS сетка

Question

Как работают вертикальное выравнивание и CSS-сетка? У меня есть элемент, который находится рядом с элементами, которые должны быть выровнены точно посередине. Смотрите ниже:

.alphabet {
  font-size: 80px;
  /*Below is not working...why?*/
  vertical-align: middle;
}

.letter-grid {
      display: flex;
}

.filter-item-grid {
    display: grid;
    display: -ms-grid;
    grid-template-columns: auto auto;
    justify-content: space-between;
    align-content: space-between;
}

.letter-grid__filter-item {
    display: grid;
    display: -ms-grid;
    grid-template-rows: repeat(3,auto);
    grid-auto-flow: column;
    margin-left: 24px;
}

<section class="letter-grid">
  <span class="alphabet">a</span>
    <div class="filter-item-grid">
      <div class="letter-grid__filter-item">
        <h3 class="letter-grid__filter-title">
          <a href="#">Example 1</a>
        </h3>
        <h3 class="letter-grid__filter-title">
          <a href="#">Example 2</a>
        </h3>
         <h3 class="letter-grid__filter-title">
          <a href="#">Example 3</a>
         </h3>
      </div>
    </div>
</section>

В этом примере у меня alphabet установлено значение vertical-align: middle; как попытка выровнять символ A прямо по центру трех элементов списка. Я сослался на документацию по вертикальному выравниванию и там написано:

Свойство вертикального выравнивания можно использовать в двух контекстах:

Для вертикального выравнивания блока встроенного элемента внутри его содержащей строки коробка. Например, его можно использовать для вертикального позиционирования img в строка текста ...

Поскольку я использую тег <span>, это потому, что я могу использовать только вертикальное выравнивание в контейнере встроенного элемента, а не <section>?

Вертикальное выравнивание не является правильным способом для выравнивания символа А в середине с элементами списка?

Answer 1

Нет, vertical-align не будет работать, если нет встроенного линейного блока.

В этом случае вы сделали span гибким ребенком и фактически удалили встроенную природу span.

Я бы предложил flexbox на alphabet промежутке.

.alphabet {
  font-size: 80px;
  display: flex;
  align-items: center;
}

.letter-grid {
  display: flex;
}

.filter-item-grid {
  display: grid;
  display: -ms-grid;
  grid-template-columns: auto auto;
  justify-content: space-between;
  align-content: space-between;
}

.letter-grid__filter-item {
  display: grid;
  display: -ms-grid;
  grid-template-rows: repeat(3, auto);
  grid-auto-flow: column;
  margin-left: 24px;
}

section * {
  border: 1px solid lightgrey;
}

<section class="letter-grid">
  <span class="alphabet">a</span>
  <div class="filter-item-grid">
    <div class="letter-grid__filter-item">
      <h3 class="letter-grid__filter-title">
        <a href="#">Example 1</a>
      </h3>
      <h3 class="letter-grid__filter-title">
        <a href="#">Example 2</a>
      </h3>
      <h3 class="letter-grid__filter-title">
        <a href="#">Example 3</a>
      </h3>
    </div>
  </div>
</section>