上下の上/中央/下寄せのやり方【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>