Skip to main content

Pivotal UI

Modifiers / Vertical alignment

Vertical alignment

Use the aligner class on a container element to help vertically align the element's children to the top, center, or bottom. Use the aligner-item and aligner-item-* classes on the children of the container element to position them within the container.

The height of the aligner element is set to 230 pixels by default but can be customized via CSS or inline styles.


alignerMakes an element into a container with vertically-aligned children
aligner-itemMakes an element int a child of the aligner container (centered vertically by default)
aligner-item-topAligns an item to the top of the container
aligner-item-bottomAligns an item to the bottom of the container
Default example
Custom height example

You can override the default height with an inline style (or with CSS).

Combination example

You can position both vertically and horizontally by combining the aligner with grids, or the text-alignment classes (txt-l, txt-r, and txt-c).


Import CSS:

import 'pivotal-ui/css/vertical-alignment';