WEB制作

【CSS】要素を中央に寄せるいろいろなテクニックをまとめてみました

スポンサーリンク

center

要素を中央に寄せることは頻繁にあります。

やり方もケースバイケースです。

 

今回の記事では、要素を中央に寄せるためのテクニックをまとめてみました。

一元的な記事ですので、状況に応じて参考になりそうな記事を見てもらえればうれしいです。

 

それではさっそく見ていきましょう。

 

テキストを左寄せの状態で中央へもってくる

箇条書きのテキストでよくあるパターンです。

 

文頭が左端にそろっている。

その状態で中央に寄せる。という方法です。

 

仕組みを理解していればなんてことはありませんが、初心者の方は「ん?」となってしまうことがあると思いますので、しっかり抑えておきましょう。

text-leftStay-center
【CSS】テキストを左寄せの状態で中央にもってくる方法

続きを見る

 

 

 

gridで並べた要素の中央寄せ

gridのマスの中で要素が左に寄ってしまっている状態から、中央に寄せる方法です。

place-items:center; を使うと中央に寄ります。

 

詳細はこちらをどうぞ。

grid
【CSS】gridで並べた要素を中央に寄せる方法

続きを見る

 

 

 

並べた要素の高さをそろえる中央寄せ

ヘッダーでよく使います。

ロゴとナビゲーションの高さをそろえるときに、align-items: center; を設定するときれに中央によります。

flexとセットで使いましょう。

 

詳細はこちら。

line-up
【flex】ヘッダーのロゴとナビゲーションの高さを中央でそろえる方法

続きを見る

 

 

 

縦並びの中央寄せ

縦ラインで中央に寄せる方法です。

 

この場合、flex-direction: column; で縦並びにします。

中央寄せは、横並びと同様に align-items: center; なんですね。

 

詳細はこちら。

center
【flex】縦に並べた要素を中央でそろえるには align-items: center です

続きを見る

 

 

 

position を使った中央寄せ

状況によっては position: absolute; を使うケースもあるでしょう。

relative の設定を忘れないように注意しましょう。

center
【CSS】position:absolute で要素を中央寄せする方法をご紹介

続きを見る

 

 

 

背景画像の中央配置

少し本題からそれますが、背景画像の中央配置です。

background-position: center; を使って、画像を中央にもっていきましょう。

 

詳細はこちらからどうぞ。

景色
【CSS】10秒で解決 背景画像の設定方法 セットで覚えておきたいコードも紹介します

続きを見る

 

 

まとめ

いかがでしたでしょうか。

紹介した記事で、ほとんどのパターンの中央寄せは対応できます。

 

ケースバイケースで使い分けていきましょう。

 

独学で行き詰まりそうな方はTechAcademy [テックアカデミー]などのプログラミングスクール検討するのもありです。

ノートPC
テックアカデミーフロントエンドコースを受講した感想 ありのままを伝えます

続きを見る

 

それでは次の記事でお会いしましょう。

スポンサーリンク

-WEB制作
-, , , ,

© 2023 WEBセンス Powered by AFFINGER5