Utilities for controlling the vertical alignment of an inline or table-cell box.
2025-04-10
Written by: tdtc
| 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>; |
Use the align-baseline utility to align the baseline of an element with the baseline of its parent:
<span class="inline-block align-baseline">The quick brown fox...</span>Use the align-top utility to align the top of an element and its descendants with the top of the entire line:
<span class="inline-block align-top">The quick brown fox...</span>Use the align-middle utility to align the middle of
an element with the baseline plus half the x-height of the parent:
<span class="inline-block align-middle">The quick brown fox...</span>Use the align-bottom utility to align the bottom of
an element and its descendants with the bottom of the entire line:
<span class="inline-block align-bottom">The quick brown fox...</span>Use the align-text-top utility to align the top of
an element with the top of the parent element’s font:
<span class="inline-block align-text-top">The quick brown fox...</span>Use the align-text-bottom utility to align the bottom of
an element with the bottom of the parent element’s font:
<span class="inline-block align-text-bottom">The quick brown fox...</span>Use the align-[ syntax to set the vertical alignment based on a completely custom value:
<span class="align-[4px] ...">
<!-- ... -->
</span>