Vertical alignment

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

On this page

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>