| 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",
);