Typography
Vertical Align
Utilities for controlling the vertical alignment of an inline or table-cell box.
Quick reference
| Class | Description |
|---|---|
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 |
Basic usage
Baseline
Use align-baseline to align the baseline of an element with the baseline of its parent.
<span class="inline-block align-baseline ...">Warp</span>Top
Use align-top to align the top of an element and its descendants with the top of the entire line.
Middle
Use align-middle to align the middle of an element with the baseline plus half the x-height of the parent.
Bottom
Use align-bottom to align the bottom of an element and its descendants with the bottom of the entire line.
Text Top
Use align-text-top to align the top of an element with the top of the parent element’s font.
Text Bottom
Use align-text-bottom to align the bottom of an element with the bottom of the parent element’s font.
Sub
Use align-sub to align the bottom of an element with the subscript-baseline of its parent.
Super
Use align-super to align the bottom of an element with the superscript-baseline of its parent.