Vertical align

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


Class reference

ClassProperties
align-baselinevertical-align: baseline;
align-topvertical-align: top;
align-middlevertical-align: middle;
align-bottomvertical-align: bottom;
align-text-topvertical-align: text-top;
align-text-bottomvertical-align: text-bottom;

# Baseline

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

The quick brown fox jumped over the lazy dog.
<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.

The quick brown fox jumped over the lazy dog.
<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.

The quick brown fox jumped over the lazy dog.
<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.

The quick brown fox jumped over the lazy dog.
<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.

The quick brown fox jumped over the lazy dog.
<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.

The quick brown fox jumped over the lazy dog.
<span class="inline-block align-text-bottom ...">...</span>

# Responsive

To control the vertical alignment only at a specific breakpoint, add a {screen}: prefix to any existing vertical align utility. For example, adding the class md:align-top to an element would apply the align-top utility at medium screen sizes and above.

<div class="relative">
<span class="align-middle md:align-top ...">...</span>
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span>
</div>

For more information about Elements’ responsive design features, check out the Responsive Design documentation.