Vertical Align

Utilities for controlling an element's text baseline.

Baseline

Use d-va-baseline to vertically align an element to the baseline.

<div class="d-d-inline-block d-va-baseline">...</div>

Top

Use d-va-top to vertically align an element to the top.

<div class="d-d-inline-block d-va-top">...</div>

Middle

Use d-va-middle to vertically align an element to middle.

<div class="d-d-inline-block d-va-middle">...</div>

Bottom

Use d-va-bottom to vertically align an element to the bottom.

<div class="d-d-inline-block d-va-bottom">...</div>

Text Top

Use d-va-text-top to vertically align an element to text top.

<div class="d-d-inline-block d-va-text-top">...</div>

Text Bottom

Use d-va-text-bottom to vertically align an element to text bottom.

<div class="d-d-inline-block d-va-text-bottom">...</div>

Classes

Class
Output
.d-va-baseline vertical-align: baseline !important;
.d-va-top vertical-align: top !important;
.d-va-bottom vertical-align: bottom !important;
.d-va-text-top vertical-align: text-top !important;
.d-va-text-bottom vertical-align: text-bottom !important;
.d-va-middle vertical-align: middle !important;
.d-va-sub vertical-align: sub !important;
.d-va-super vertical-align: super !important;
.d-va-unset vertical-align: unset !important;
Vertical Align documentation last updated Thursday, June 11, 2026