Vertical Align

Utilities for controlling the vertical alignment of an inline or table-cell box.

Class	Properties
.va-baseline	vertical-align: baseline;
.va-middle	vertical-align: middle;
.va-top	vertical-align: top;
.va-bottom	vertical-align: bottom;
.va-text-top	vertical-align: text-top;
.va-text-bottom	vertical-align: text-bottom;

Baseline

Use .va-baseline to align the baseline of an element with the baseline of its parent.

.va-baseline

Middle

Use .va-middle to align the middle of an element with the baseline plus the x-height of the parent.

.va-middle

Top

Use .va-top to align the top of an element and its descendants with the top of the entire line.

.va-top

Bottom

Use .va-bottom to align the bottom of an element and its descendants with the bottom of the entire line.

.va-bottom

Text Top

Use .va-text-top to align the top of an element with the top of the parent element's font.

.va-text-top

Text Bottom

Use .va-text-bottom to align the bottom of an element with the bottom of the parent element's font.

.va-text-bottom

Variants

By default, only responsive variants are generated for this utility. You can control which variants are generated by modifying the $utility-configuration in _settings.scss.