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.

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.

baseline

<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.

top

<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.

middle

<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.

bottom

<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.

text-top

<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.

text-bottom

<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>