Свойство vertical-align в CSS работает следующим образом: оно выравнивает текстовые элементы по вертикали относительно друг друга. 2

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

Если vertical-align применяется к ячейке таблицы, то оно влияет на выравнивание всего содержимого, расположенного в ячейке таблицы, а не на саму ячейку. 3

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

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

Помимо ключевых слов, можно использовать числовые значения. 2 Если указать значение в любых доступных единицах измерения, то положительное значение сдвинет элемент вверх относительно базовой линии, а отрицательно — вниз. 2