Vertical Alignment

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

Please note that vertical-align only affects inline, inline-block, inline-table, and table cell elements.

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

To vertically center non-inline content (like <div>s and more), use our flex box utilities .

With inline elements:

baseline top middle bottom text-top text-bottom
vue
<template>
 <b-span vertical-align="baseline">
  baseline
 </b-span>
 <b-span vertical-align="top">
  top
 </b-span>
 <b-span vertical-align="middle">
  middle
 </b-span>
 <b-span vertical-align="bottom">
  bottom
 </b-span>
 <b-span vertical-align="text-top">
  text-top
 </b-span>
 <b-span vertical-align="text-bottom">
  text-bottom
 </b-span>
</template>

With table cells:

baseline top middle bottom text-top text-bottom
baseline top middle bottom text-top text-bottom
vue
<template>
 <b-span vertical-align="baseline">
  baseline
 </b-span>
 <b-span vertical-align="top">
  top
 </b-span>
 <b-span vertical-align="middle">
  middle
 </b-span>
 <b-span vertical-align="bottom">
  bottom
 </b-span>
 <b-span vertical-align="text-top">
  text-top
 </b-span>
 <b-span vertical-align="text-bottom">
  text-bottom
 </b-span>

 <b-table style="height: 100px">
  <b-tbody>
   <b-tr>
    <b-td vertical-align="baseline">
     baseline
    </b-td>
    <b-td vertical-align="top">
     top
    </b-td>
    <b-td vertical-align="middle">
     middle
    </b-td>
    <b-td vertical-align="bottom">
     bottom
    </b-td>
    <b-td vertical-align="text-top">
     text-top
    </b-td>
    <b-td vertical-align="text-bottom">
     text-bottom
    </b-td>
   </b-tr>
  </b-tbody>
 </b-table>
</template>

See Also