要素を中央に寄せることは頻繁にあります。
やり方もケースバイケースです。
今回の記事では、要素を中央に寄せるためのテクニックをまとめてみました。
一元的な記事ですので、状況に応じて参考になりそうな記事を見てもらえればうれしいです。
それではさっそく見ていきましょう。
テキストを左寄せの状態で中央へもってくる
箇条書きのテキストでよくあるパターンです。
文頭が左端にそろっている。
その状態で中央に寄せる。という方法です。
仕組みを理解していればなんてことはありませんが、初心者の方は「ん？」となってしまうことがあると思いますので、しっかり抑えておきましょう。
-
【CSS】テキストを左寄せの状態で中央にもってくる方法
続きを見る
gridで並べた要素の中央寄せ
gridのマスの中で要素が左に寄ってしまっている状態から、中央に寄せる方法です。
place-items:center; を使うと中央に寄ります。
詳細はこちらをどうぞ。
-
【CSS】gridで並べた要素を中央に寄せる方法
続きを見る
並べた要素の高さをそろえる中央寄せ
ヘッダーでよく使います。
ロゴとナビゲーションの高さをそろえるときに、align-items: center; を設定するときれに中央によります。
flexとセットで使いましょう。
詳細はこちら。
-
【flex】ヘッダーのロゴとナビゲーションの高さを中央でそろえる方法
続きを見る
縦並びの中央寄せ
縦ラインで中央に寄せる方法です。
この場合、flex-direction: column; で縦並びにします。
中央寄せは、横並びと同様に align-items: center; なんですね。
詳細はこちら。
-
【flex】縦に並べた要素を中央でそろえるには align-items: center です
続きを見る
position を使った中央寄せ
状況によっては position: absolute; を使うケースもあるでしょう。
relative の設定を忘れないように注意しましょう。
-
【CSS】position:absolute で要素を中央寄せする方法をご紹介
続きを見る
背景画像の中央配置
少し本題からそれますが、背景画像の中央配置です。
background-position: center; を使って、画像を中央にもっていきましょう。
詳細はこちらからどうぞ。
-
【CSS】10秒で解決 背景画像の設定方法 セットで覚えておきたいコードも紹介します
続きを見る
まとめ
いかがでしたでしょうか。
紹介した記事で、ほとんどのパターンの中央寄せは対応できます。
ケースバイケースで使い分けていきましょう。
独学で行き詰まりそうな方はTechAcademy [テックアカデミー]
などのプログラミングスクール検討するのもありです。
-
テックアカデミーフロントエンドコースを受講した感想 ありのままを伝えます
続きを見る
それでは次の記事でお会いしましょう。