CSSで要素を中央寄せしたいけど、どうしても動かせない、そんなことはありませんか。今回はCSSで要素を中央寄せする方法を３つ紹介したいと思います。この３つの方法を使えば、イメージ通りのデザインを完成させることができるでしょう。それではCSSで要素を中央寄せする方法を紹介していきます。
Contents
・margin: 0 auto;
この方法は『margin』を使って、要素を中央寄せする方法です。『margin』は余白を指定するプロパティです。『margin: 0 auto;』とすることで、topとbottomは余白を付けず、leftとrightにのみ『auto』という値を指定します。この場合の『auto』とは左右に値はデバイスによって変化しますが、同じ値の余白を付けるというものです。左右に同じだけの値の余白があるということは、要素はそれぞれのデバイスの中間に位置されることになります。
『margin: 0 auto;』ではこのような仕組みで要素を中央寄せすることできます。要素を中央寄せすることのできるCSSとしてはポピュラーな方法です。
body {
margin: 0 auto;
}・text-align: center;
この方法は『text-align』を使って、要素を中央寄せする方法です。『text-align』は要素の位置を指定するプロパティです。『text-align: center;』とすることで、要素は中央寄せされます。別で余白の指定をしている場合、その影響で相対的に中央寄せされていないことや、『text-align: center;』が効いていないこと以外でこの指定方法で中央寄せされないことはありません。
この『text-align: center;』は一番イメージしやすく、使いやすいプロパティと思います。まずはbody要素にこの『text-align: center;』を指定して、サイト全体を中央寄せするのもおススメです。
body {
text-align: center;
}注意：『width: 〇〇%;』を指定すると、『margin: 0 auto;』や『text-align: center;』が効かない
これは実際に体験した話ですが、body要素に『margin: 0 auto;』と『text-align: center;』を指定して、サイト全体を中央寄せしたのにも関わらず、要素が左寄せになっているときがありました。何故、そうなってしまったかというと、要素を中央寄せした後に要素の大きさを『width: 〇〇%;』で指定してしまっていたからです。それをしてしまっていると、『margin: 0 auto;』と『text-align: center;』が無効化されて左寄せされ、横幅が指定された大きさで表示されてしまいます。そのため、『width: 〇〇%;』を指定した後は再度、『margin: 0 auto;』を指定することにより、要素は横幅が指定された状態で中央寄せされます。
応用：横並びしたリストは『justify-content: center;』で中央寄せ
これはflexアイテムを中央寄せするときの方法です。『justify-content』ではflexアイテムを任意の間隔に並べることができます。
flexboxを使用してリストを横並びにする方法はリストを『display: flex;』で横並びにする方法で詳しく解説していますので、参考にしてみてください。
こちらの記事のように横並びのリストを作ることができます。そのリストを中央寄せする時には『justify-content: center;』を指定することで、リストに含まれるアイテムが中央寄せされます。
body {
justify-content: center;
}しかし、これではアイテム間に余白がないため、リストに詰まった印象が出てしまいます。『padding』や『margin』で余白を作ることは可能ですが、この『justify-content: center;』を使用する機会は少ないかもしれません。そのため、『justify-content』というプロパティがあることだけ覚えておいてその都度デザインに合わせて『justify-content』の値を選ぶようにするといいでしょう。
今回は３つの中央寄せの方法を紹介しました。これらの方法はサイト制作において必ず必要になっていく知識の一つでもあります。しかし、それが何らかの理由で効いていない時はこの記事でも紹介したミスがあるかもしれません。もし、他の間違いがあったとしても焦らずに何が効いていて何が効いていないかを確認していけば、自ずと答えは見つけられるはずです。
