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>