Как работает свойство vertical-align для выравнивания блоков в HTML?

Свойство vertical-align в HTML работает следующим образом: оно применяется только к строчным элементам inline или строчным блокам inline-block и влияет на выравнивание самого элемента, а не его содержимого (кроме случаев, когда применяется к ячейкам таблицы). web-standards.ru

При правильном применении свойство vertical-align заставит текущий элемент выровняться относительно других строчных элементов. web-standards.ru Выше или ниже расположится элемент, будет зависеть от высоты строчных элементов на этой же строке или от свойства line-height, заданного для неё. web-standards.ru

Некоторые доступные значения свойства vertical-align:

• baseline — значение по умолчанию, выравниваемый элемент выстраивается по нижней линии текста. doka.guide Если в родительском элементе нет текста, то элемент выравнивается по нижней границе. doka.guide
• top — верхняя граница элемента находится на уровне верхней границы строки. doka.guide
• middle — элемент выравнивается по центру. doka.guide
• bottom — выравнивает нижнюю границу элемента по уровню нижней границы строки. doka.guide

Помимо ключевых слов, vertical-align принимает числовые значения: положительное значение сдвинет элемент вверх относительно базовой линии, а отрицательное — вниз. doka.guide