CSSで文字を中央寄せするために「margin 0 auto」を指定したのにも関わらず効いていなくて中央寄せにならないことがあります。
今回は中央寄せにならない原因とその対処法について解説していきたいと思います。
margin 0 autoが効かない原因と対処法
原因1 インライン要素にmarginをしている
index.html
<body>
<h1><a href="#">中央寄せ</h1>
</body>
stylesheet.css
a {
margin: 0 auto;
}
中央寄せになっていないのは、marginがかかっている要素がインライン要素だからです。インライン要素にはmarginやpaddingを指定できません。
インライン要素は、aタグ（リンク）、spanタグ（テキスト）、imgタグ（リンク）などのことです。
インライン要素を中央寄せしたいときは、text-alignを使用することで中央寄せにすることができます。ただし、親要素に指定します。
stylesheet.css
h1 {
text-align: center;
}
##原因2 ブロック要素に指定しているがwidthを指定していない
index.html
<body>
<h1>中央寄せ</h1>
</body>
stylesheet.css
h1 {
margin: 0 auto;
}
上記のように、ブロック要素にmargin 0 autoを使用しているのに中央によらない場合があります。この時の原因として考えられるのは、要素の横幅が画面いっぱいに広がっているため、要素を動かすことができないことが挙げられます。よくわからない時は一度、borderプロパティなどを用いて要素を可視化してみましょう。
stylesheet.css
h1 {
margin: 0 auto;
border: 2px solid #000000;
}
このときは、widthを用いて親要素より幅を小さくすることで要素を中央に寄せることができます。
stylesheet.css
h1 {
margin: 0 auto;
border: 2px solid #000000;
width: 150px;
}
#まとめ
今回は、margin 0 autoを指定しても中央寄せにならない原因と対処法について解説しました。
初心者だと文字が中央寄せにならない等ということで結構悩むことが出てきます。
marginが反映されない時は、一度borderなどを用いて要素を可視化することで原因を特定することができることがあります。
cssでmarginで中央寄せができない時はぜひ参考にしてみてください。