Как выровнять текст по вертикали в html

У правила для горизонтального выравнивания текста text-align, есть собрат, который называется vertical-align. Как и text-align, vertical-align выравнивает элементы со строчным или строчно-блочным типом бокса. Отличие в том, что свойство text-align применяется к родительскому блоку, а vertical-align необходимо применять непосредственно к выравниваемому элементу. Свойство vertical-align удобно применять, когда необходимо, например, выровнять иконку внутри строки или два рядом стоящих строчно-блочных элемента. Важно понимать, что vertical-align выравнивает элемент относительно содержащей строки, а не относительно ближайших элементов. Кроме того, свойство vertical-align можно использовать для того, чтобы выравнивать контент в ячейке таблицы.

Рассмотрим пример:

<p>Выр<span class="up">авн</span>ивание по <span class="down">вер</span>тикали<p>

.up {
  vertical-align: 10px;
}

.down {
  vertical-align: sub;
}