上下中央や上寄せ、下寄せに配置するためのクラスも用意されています。
flexboxを利用するため、それぞれ２つのクラスを指定すればOKです。
1. 上下中央寄せ
「d-flex」と「align-items-center」を指定します。
|
1 2 3 |
<div class="d-flex align-items-center"> 上下中央寄せされる </div> |
2. 上寄せ
「d-flex」と「align-items-start」を指定します。
topでは無くstartなので注意ですね。
|
1 2 3 |
<div class="d-flex align-items-start"> 上寄せされる </div> |
3. 下寄せ
「d-flex」と「align-items-end」を指定します。
これもbottomでは無くendなので注意です。
|
1 2 3 |
<div class="d-flex align-items-end"> 下寄せされる </div> |
クラスを追加するだけなので、本当に楽ちんですよね。
サンプルも作ってますので見てくださいね。
3.下寄せ のサンプルコードに書かれているテキストが”上寄せされる”になっています！
ご指摘ありがとうございます。
修正しました！