Vertical align

Set the vertical alignment of inline, inline-block, inline-table and table-cell elements with a class.

Choose from .align-baseline, .align-top, .align-middle, .align-bottom, .align-text-bottom, and .align-text-top as needed.

Inline elements

Use these classes on inline elements, such as an icon or a badge next to text, to move them up or down relative to the text line.

<div>
  <span class="align-baseline">baseline</span>
  <span class="align-top">top</span>
  <span class="align-middle">middle</span>
  <span class="align-bottom">bottom</span>
  <span class="align-text-top">text-top</span>
  <span class="align-text-bottom">text-bottom</span>
</div>

Table cells

The same classes work on table cells and move the content of a cell to the top, middle or bottom of the row.

<table style="height: 100px" class="bg-surface">
  <tbody>
    <tr>
      <td class="align-baseline border">baseline</td>
      <td class="align-top border">top</td>
      <td class="align-middle border">middle</td>
      <td class="align-bottom border">bottom</td>
      <td class="align-text-top border">text-top</td>
      <td class="align-text-bottom border">text-bottom</td>
    </tr>
  </tbody>
</table>

Accessibility

• Vertical alignment changes where an element sits on the line, not what it means. An icon aligned with align-middle still needs a name if it carries information.
• These utilities only work on inline, inline-block and table-cell elements. On a flex or grid child they do nothing - use align-items there instead.
• Aligning an icon next to text does not make the two one thing. Keep them inside the same element, or the icon is read separately from the label.
• Do not lower the line height to make alignment look tighter. Users need that space to track lines of text.

Related