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.
<span class="-vertical-align--baseline">...</span>
Top
Use -vertical-align--top
to align the top of the element and its descendants with the top of the entire line.
<span class="-vertical-align--top">...</span>
Middle
Use -vertical-align--middle
to align the middle of an element with the baseline plus half the x-height of the parent.
<span class="-vertical-align--middle">...</span>
Bottom
Use -vertical-align--bottom
to align the bottom of an element and its descendants with the bottom of the entire line.
<span class="-vertical-align--bottom">...</span>
Text top
Use -vertical-align--text-top
to align the top of an element with the top of the parent element's font.
<span class="-vertical-align--text-top">...</span>
Text bottom
Use -vertical-align--text-bottom
to align the bottom of an element with the bottom of the parent element's font.
<span class="-vertical-align--text-bottom">...</span>
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. |
<table class="chi-table">
<thead>
<tr>
<th>Column</th>
<th>Column</th>
<th>Column</th>
<th>Column</th>
</tr>
</thead>
<tbody>
<tr>
<td class="-vertical-align--baseline">baseline</td>
<td class="-vertical-align--top">top</td>
<td class="-vertical-align--middle">middle</td>
<td class="-vertical-align--bottom">bottom</td>
<td>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.</td>
</tr>
</tbody>
</table>