Change the alignment of elements with the vertical-alignment utilities. To vertically center non-inline content (like <div>s and more), use our flex box utilities.
Quick reference
| Class | Properties |
|---|---|
.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 ...">...</span>
Top
Use align-top to align the top of an element and its descendants with the top of the entire line.
<span class="inline-block align-top ...">...</span>
Middle
Use align-middle to align the middle of an element with the baseline plus half the x-height of the parent.
<span class="inline-block align-middle ...">...</span>
Bottom
Use align-bottom to align the bottom of an element and its descendants with the bottom of the entire line.
<span class="inline-block align-bottom ...">...</span>
Text Top
Use align-text-top to align the top of an element with the top of the parent element’s font.
<span class="inline-block align-text-top ...">...</span>
Text Bottom
Use align-text-bottom to align the bottom of an element with the bottom of the parent element’s font.
<span class="inline-block align-text-bottom ...">...</span>