Vertical-align
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.
Class | Value |
---|---|
-vertical-align--baseline | vertical-align: baseline |
-vertical-align--top | vertical-align: top |
-vertical-align--middle | vertical-align: middle |
-vertical-align--bottom | vertical-align: bottom |
-vertical-align--text-top | vertical-align: text-top |
-vertical-align--text-bottom | vertical-align: text-bottom |
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.
Class | Value |
---|---|
-vertical-align-sm--middle | Vertical middle aligned on sm and up. |
-vertical-align-md--middle | Vertical middle aligned on md and up. |
-vertical-align-lg--middle | Vertical middle aligned on lg and up. |
-vertical-align-xl--middle | Vertical middle aligned on xl 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.
Baseline #
Use -vertical-align--baseline
to align the baseline of an element with the baseline of its parent.
Top #
Use -vertical-align--top
to align the top of the element and its descendants with the top of the entire line.
Middle #
Use -vertical-align--middle
to align the middle of an element with the baseline plus half the x-height of the parent.
Bottom #
Use -vertical-align--bottom
to align the bottom of an element and its descendants with the bottom of the entire line.
Text top #
Use -vertical-align--text-top
to align the top of an element with the top of the parent element's font.
Text bottom #
Use -vertical-align--text-bottom
to align the bottom of an element with the bottom of the parent element's font.
Table cell elements #
Use the vertical-align utility to change the vertical alignment of table cell elements.
Column | Column | Column | Column | Column |
---|---|---|---|---|
baseline | top | middle | bottom | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae faucibus est. Vestibulum lacinia diam ut dignissim fermentum. Phasellus mollis ut lacus vitae molestie. Nam id libero tristique, porta leo non, ultrices neque. |