Vertical-align

Use to change the vertical alignment of inline, inline-block, inline-table, and table cell elements.

Notation#

Vertical-align classes can be defined using the format -vertical-align[-{breakpoint}]--{value}. Breakpoints supported are sm, md, lg, and xl.

Target all breakpoints#

Vertical-align utility classes with no breakpoint defined apply to all screen sizes.

Target specific breakpoints#

To target a specific breakpoint, add the breakpoint abbreviation to the class. As Chi is a mobile first library, the value will apply to that specific breakpoint and up.

Examples#

Vertical-align is only compatible with inline, inline-block, inline-table, and table cell elements. It cannot be used to vertically align block-level elements.