Как использовать свойство «vertical-align» в CSS

Свойство vertical-align в CSS позволяет устанавливать вертикальное выравнивание элементов. Это свойство может работать только с элементами, которые находятся в строке, или с элементами внутри ячейки таблицы.

Содержание

Синтаксис
Какие значения можно установить?
Реализация свойства

Синтаксис

Синтаксис этого свойства следующий. следует:

 vertical-align: value-to-be-set;

Ниже показана иллюстрация, демонстрирующая vertical-align свойство.

Посмотрите, как блоки выровнены по вертикали

Какие значения можно установить?

Метод vertical-align может принимать различные типы устанавливаемого значения для выравнивания соответствующего элемента разными способами. Давайте посмотрим на некоторые из возможных значений, которые можно ему присвоить:

baseline : Это значение по умолчанию , которое устанавливает выравнивание элемента по базовым линиям его родительского элемента.
sub : устанавливает выравнивание элемента в соответствии с нижним индексом родительского.
super : устанавливает выравнивание элемента в соответствии с верхним индексом родительского элемента.
% : элемент можно выровнять по строке на определенный процент; отрицательный процент переместит элемент ниже.
px : число, за которым следует px также может выровнять элемент на определенное количество пикселей, это также может иметь отрицательное значение.
text-top или text-bottom : выравнивает элемент по верхнему краю или нижняя часть текста, которому он соответствует соответственно.
top или bottom : выравнивает элемент по единственному элементу на самой высокой или самой нижней линии соответственно.

Реализация свойства

Теперь, когда мы знаем различные входные данные, которые можно передать свойству vertical-align , в приведенном ниже коде показано, как использовать некоторые из них..

В приведенном ниже фрагменте добавьте свой собственный класс и проверьте другие значения, которые могут быть присвоены свойству: