Utilities - Vertical Align

Change the vertical alignment of inline, inline block, inline table, and table cell elements.

Text Alignment

You can use vertical align utilities to change the alignment of elements. Please note that vertical-align only affects inline, inline-block, inline-table, and table-cell elements.

baselinetopmiddlebottomtext-toptext-bottom
<span class="_vertical-align:baseline">baseline</span>

<span class="_vertical-align:top">top</span>

<span class="_vertical-align:middle">middle</span>

<span class="_vertical-align:bottom">bottom</span>

<span class="_vertical-align:text-top">text-top</span>

<span class="_vertical-align:text-bottom">text-bottom</span>

Table Cell Alignment

You can use vertical align utilities to change the alignment of table cells.

baselinetopmiddlebottomtext-toptext-bottom
<table class="table" style="height: 100px;">
    <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 class="_vertical-align:text-top">text-top</td>
        <td class="_vertical-align:text-bottom">text-bottom</td>
    </tr>
    </tbody>
</table>