Bootstrap4では、インライン要素の左寄せ・右寄せ・中央寄せができるクラスがあらかじめ用意されています。
CSSをその都度書く必要はありません。クラスを追加することで、インライン要素を寄せることができます。
サンプルも作りました。
インライン要素の左寄せ
「text-left」というクラスを追加します。
|
1 2 3 |
<div class="col text-left"> <span>左寄せ</span> </div> |
これだけで左寄せになります。
右寄せ・中央寄せも同じように実現できます。
インライン要素の右寄せ
「text-right」というクラスを追加します。
|
1 2 3 |
<div class="col text-right"> <span>右寄せ</span> </div> |
簡単ですね。
続いて中央寄せです。
インライン要素の中央揃え
「text-center」というクラスを追加します。
|
1 2 3 |
<div class="col text-center"> <span>中央寄せ</span> </div> |
インライン要素すべてに有効ですので、画像とかにも効きますよ。
制作時間短縮のために、用意されているクラスはどんどん使っていきましょう！
良ければサンプルも見てくださいね。
ブロック要素の左寄せ・右寄せ・中央寄せ（センタリング）はこのリンクから
[…] としたが中央に寄らない。 そこで下記のページを見つけて中央寄せにすることができた。 http://clue-design.com/bootstrap4/bootstrap4-inline-left-right-center まず、mx-autoを使用するのではなく、 […]