DocsComponents

Vertical Align

Easily change the vertical alignment of inline, inline-block, inline-table, and table cell elements.
Contents

Change the alignment of elements with the vertical-alignment utilities. To vertically center non-inline content (like <div>s and more), use our flex box utilities.

Vertical-align only affects inline, inline-block, inline-table, and table cell elements.

Quick reference

ClassProperties
.align-baselinevertical-align: baseline;
.align-topvertical-align: top;
.align-middlevertical-align: middle;
.align-bottomvertical-align: bottom;
.align-text-topvertical-align: text-top;
.align-text-bottomvertical-align: text-bottom;
.align-subvertical-align: sub;
.align-supervertical-align: super;

With inline elements

baseline top middle bottom text-top text-bottom
<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>

With table cells:

baselinetopmiddlebottomtext-toptext-bottom
<table style="height: 100px;">
  <tbody>
    <tr class="bg-light">
      <td class="align-baseline">baseline</td>
      <td class="align-top">top</td>
      <td class="align-middle">middle</td>
      <td class="align-bottom">bottom</td>
      <td class="align-text-top">text-top</td>
      <td class="align-text-bottom">text-bottom</td>
    </tr>
  </tbody>
</table>

Basic Examples

Baseline

Use align-baseline to align the baseline of an element with the baseline of its parent.

The quick brown fox jumps over the lazy dog. 
<img class="align-baseline" src="path/to/image.jpg" />

Top

Use align-top to align the top of an element and its descendants with the top of the entire line.

The quick brown fox jumps over the lazy dog. 
<img class="align-top" src="path/to/image.jpg" />

Middle

Use align-middle to align the middle of an element with the baseline plus half the x-height of the parent.

The quick brown fox jumps over the lazy dog. 
<img class="align-middle" src="path/to/image.jpg" />

Bottom

Use align-bottom to align the bottom of an element and its descendants with the bottom of the entire line.

The quick brown fox jumps over the lazy dog. 
<img class="align-bottom" src="path/to/image.jpg" />

Text Top

Use align-text-top to align the top of an element with the top of the parent element’s font.

The quick brown fox jumps over the lazy dog. 
<img class="align-text-top" src="path/to/image.jpg" />

Text Bottom

Use align-text-bottom to align the bottom of an element with the bottom of the parent element’s font.

The quick brown fox jumps over the lazy dog. 
<img class="align-text-bottom" src="path/to/image.jpg" />