1. Типография
  2. vertical-align

Типография

vertical-align

Утилиты для управления вертикальным выравниванием строчного или табличного элемента.

ClassStyles
align-baseline
vertical-align: baseline;
align-top
vertical-align: top;
align-middle
vertical-align: middle;
align-bottom
vertical-align: bottom;
align-text-top
vertical-align: text-top;
align-text-bottom
vertical-align: text-bottom;
align-sub
vertical-align: sub;
align-super
vertical-align: super;
align-(<custom-property>)
vertical-align: var(<custom-property>);
align-[<value>]
vertical-align: <value>;

Примеры

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

Используйте утилиту 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>

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

Авторские права © 2025 Tailwind Labs Inc.·Политика в отношении товарных знаков