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

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

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

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

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