Типография
Утилиты для управления вертикальным выравниванием строчного или табличного элемента.
Class | Styles |
---|---|
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>
Подробнее об использовании вариантов читайте в документации по вариантам.