vertical-align (垂直方向)の整列は inline, inline-block, inline-table, and table cell にのみ影響することに注意してください。
必要に応じて vertical-align= baseline, top, middle, bottom, text-bottom, text-top から選択してください。
インラインではないコンテンツ <div> など を垂直方向にセンタリングするには、 flex box utilities を使用します。
インライン要素:
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>
テーブルセル:
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>