上下の上/中央/下寄せのやり方【Bootstrap4】

Bootstrap

Bootstrapで上とか下に寄せて表示するやり方

テーブルとかでセルが予想以上に縦長になった時に、

「なんか表示がダサい。上下中央寄せにしたい」

って時によく指定するやり方です

縦方向の寄せ方

テーブル・インライン

上寄せ

align-top

中央寄せ

align-middle

下寄せ

align-bottom

コード全文（テーブル）

<table>
    <tr>
        <td class="align-bottom">僕を下にしてー</td>
    </tr>
</table>

コード全文（インライン）

spanタグみたいなインライン内での揃え方

<span class="align-top">上にしてー</span>
<span class="align-middle">中央にしてー</span>
<span class="align-bottom">下にしてー</span>

Flex

「align-◯◯を指定したけど、全然動かない！」

って時は、Flexを使うと大体の場合で解決できます

上寄せ

d-flex align-items-start

中央寄せ

d-flex align-items-center

下寄せ

d-flex align-items-end

コード全文

<div class="d-flex align-items-center">
    ここの文字が上下中央になる！
</div>