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>