Typography
Vertical Alignment
Utilities for controlling the vertical alignment of an inline or table-cell box.
Basic usage
Baseline
Use align-baseline to align the baseline of an element with the baseline of its parent.
The quick brown fox jumps over the lazy dog.
<span className="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.
The quick brown fox jumps over the lazy dog.
<span className="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.
The quick brown fox jumps over the lazy dog.
<span className="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.
The quick brown fox jumps over the lazy dog.
<span className="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.
The quick brown fox jumps over the lazy dog.
<span className="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.
The quick brown fox jumps over the lazy dog.
<span className="inline-block **align-text-bottom** ...">...</span>