vertical-align

Примеры

Выравнивание по базовой линии

Используйте утилиту align-baseline для выравнивания базовой линии элемента с базовой линией его родителя:

<span class="inline-block align-baseline">The quick brown fox...</span>

Выравнивание по верху

Используйте утилиту align-top для выравнивания верха элемента и его потомков с верхом всей строки:

<span class="inline-block align-top">The quick brown fox...</span>

Выравнивание по центру

Используйте утилиту align-middle для выравнивания центра элемента с базовой линией плюс половина x-высоты родителя:

<span class="inline-block align-middle">The quick brown fox...</span>

Выравнивание по низу

Используйте утилиту align-bottom для выравнивания низа элемента и его потомков с низом всей строки:

<span class="inline-block align-bottom">The quick brown fox...</span>

Выравнивание по верху родителя

Используйте утилиту align-text-top для выравнивания верха элемента с верхом шрифта родительского элемента:

<span class="inline-block align-text-top">The quick brown fox...</span>

Выравнивание по низу родителя

Используйте утилиту align-text-bottom для выравнивания низа элемента с низом шрифта родительского элемента:

<span class="inline-block align-text-bottom">The quick brown fox...</span>

Использование пользовательского значения

Используйте синтаксис align-[<value>] , чтобы задать vertical alignment на основе полностью пользовательского значения:

<span class="align-[4px] ...">  <!-- ... --></span>

Для переменных CSS вы также можете использовать синтаксис: align-(<custom-property>)

<span class="align-(--my-alignment) ...">  <!-- ... --></span>

Это просто сокращение, align-[var(<custom-property>)] которое автоматически добавляет функцию var().

Адаптивный дизайн

Префикс a vertical-align утилита с вариантом контрольной точки, например md:, чтобы применить утилиту только при размерах экрана medium и выше:

<span class="align-middle md:align-top ...">  <!-- ... --></span>

Подробнее об использовании вариантов читайте в документации по вариантам.