Sections

Vertical align

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

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;

Usage

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

Use the .align-top utility to align the element with the tallest element on the line.

Use the .align-middle utility to place the element in the middle of the parent element.

Use the .align-bottom utility to align the element with the lowest element on the line.

Use the .align-text-top utility to align the element with the top of the parent element’s font.

Use the .align-text-bottom utility to align the element with the bottom of the parent element’s font.

Variants

By default, only responsive variants are generated for vertical alignment utilities.

Responsive

To control the vertical aligment of an element at a specific breakpoint, add a {screen}: prefix to any existing vertical alignment utility.

For example, use .md:align-bottom to apply the align-bottom utility at only medium screen sizes and above.

Hover-state

To include hover-state variants like .hover:align-bottom, add "vertical-align" to the $hover-variants variable when recompiling your CSS:

$hover-variants: (
  // ...
  "vertical-align",
);