Skip to main content

Vertical alignment

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

Example

Change the alignment of elements with the align-* classes.

AlignExample
.align-baselinetext
.align-toptext
.align-middletext
.align-bottomtext
.align-text-toptext
.align-text-bottomtext
 
<div class="table-responsive">
  <table class="table align-middle demo-table-h200">
    <thead><tr><th scope="col">Align</th><th scope="col">Example</th></tr></thead>
    <tbody>
      <tr><th scope="row"><code>.align-baseline</code></th><td class="align-baseline">text</td></tr>
      <tr><th scope="row"><code>.align-top</code></th><td class="align-top">text</td></tr>
      <tr><th scope="row"><code>.align-middle</code></th><td class="align-middle">text</td></tr>
      <tr><th scope="row"><code>.align-bottom</code></th><td class="align-bottom">text</td></tr>
      <tr><th scope="row"><code>.align-text-top</code></th><td class="align-text-top">text</td></tr>
      <tr><th scope="row"><code>.align-text-bottom</code></th><td class="align-text-bottom">text</td></tr>
    </tbody>
  </table>
</div>

Inline vertical

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

With flexbox, prefer .align-items-* / .align-self-* — see the Flex utilities.