CSSHTMLJS/jQuery備忘録

[CSS]中央揃えや中央寄せの仕方

センター

中央揃えや中央寄せの仕方はたくさんあると思いますが、私なりの使い分けを紹介できたらなということで、参考までにいくつか紹介させていただきます。

  1. text-align:centerで左右中央(インライン要素)
  2. margin:0 auto;で左右中央(ブロック要素)
  3. position:absolute;で上下左右中央(インライン要素、ブロック要素)
  4. paddingで上下左右中央(1行テキスト情報)
  5. さいごに

text-align:centerで左右中央(インライン要素)

言わずとしれた、インラインの子要素を左右中央寄せにするものです。ブロック要素の場合はdisplay: inline-block;でインライン要素にすることで、text-align: center;が使用できます。

See the Pen jwwQqZ by namimatsudaira (@nanaimoweb) on CodePen.

margin:0 auto;で左右中央(ブロック要素)

ブロック要素はtext-align:centerが効かないので、横幅を指定して左右の余白をautoとすることで、左右中央になります。

See the Pen JJyOyg by namimatsudaira (@nanaimoweb) on CodePen.

position:absolute;で上下左右中央(インライン要素、ブロック要素)

中央寄せしたい要素の幅、高さを指定し、親要素に対して上下左右中央にすることができます。高さと横幅、margin: auto;を指定してあげることで、中央になります。

See the Pen YQxzEW by namimatsudaira (@nanaimoweb) on CodePen.

paddingで上下左右中央(1行テキスト情報)

テキストが1行の場合はpaddingの値を同じにしてあげれば中央になりますね。

See the Pen XgazZG by namimatsudaira (@nanaimoweb) on CodePen.

さいごに

CSSのなかでは基本中の基本ですが、よく使いますので理解しておくと良いと思います。その他の方法は、ブラウザに制限があったり注意点が多いのでクライアントワークではあまり使用しません。なぜなら、自分はMacで制作しておりますが、クライアントさまはWindowsをご利用になられてることが多かったりします。また、バージョンも低かったり、様々な環境で使用されていることを想定するとあまり冒険ができないのが現状です。しかし、どうしてもの時は対応環境などを説明した上で使用することもあるので、怖がらずに色んな方法を試してみてください。