【一発で解決】margin 0 autoが効かない理由と意味
早速ですがmargin:0 auto;が効かない時は以下のことを確認してみてください。
- displayの値が「inline」「inline-block」以外になっているか
- widthを指定しているか
- positionやfloatにmargin:0 auto;をかけていないか
WEB制作を学び始めた時は「真ん中に寄せたい時はmargin:0 auto;かtext-alignを使おう」と思ってる人は何気に多いです。
自分もtext-alignが効かなかったらmargin:0 auto;を指定してみるなんて時期もありました。
今回はそんなmargin:0 auto;が効かない理由とmarginの使い方について解説していきます。
margin:0 auto;について
margin:0 auto;はdisplayの値が「inline」「inline-block」以外のときかつ、要素の横幅が「100％以下」の時に使うことができます。
実際にはこんな感じ。
p{
width:40%;
margin:0 auto;
border:1px solid #000;
}
margin:0 auto;で真ん中にしています。
上記の例は要素の横幅を40%に指定しているため、コンテンツ幅より小さいため、真ん中に持ってくることができます。
一応「width:40%;」を外して見ましょう。
p{
margin:0 auto;
border:1px solid #000;
}
margin:0 auto;で真ん中にしています。
「p」などのもともとdisplayの値がblockの要素は横幅が100%になっています。そのため横幅を指定しないと、そもそも「真ん中」という概念が通用しませんよね。
margin:0 auto;の「auto」って何？
margin:0 auto;の「auto」はmarginの左右の値が「auto」ということです。
知っている方も多いと思いますが、marginやpaddingなどのいくつかのプロパティは省略して記述することができますし、まとめていくつかの値を入れることもできます。
実際にはこんな感じ。
p{
上にマージンを取る
margin-top: 30px;
右にマージンを取る
margin-right: 30px;
下にマージンを取る
margin-bottom: 30px;
左にマージンを取る
margin-left: 30px;
}
p{
margin: 30px;
/* 同じ意味 */
margin: 30px 30px;
/* 同じ意味 */
margin: 30px 30px 30px;
/* 同じ意味 */
margin: 30px 30px 30px 30px;
}
詳しくはこちらの記事で解説していますので、ぜひ。
ちょっと前置きが長くなりましたが、margin:0 auto;をばらすとこんな感じ。
p{
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
上下の値が「0」で左右の値が「auto」になっているのが目に見えてわかります。
margin-right: auto;とmargin-left: auto;はどんな挙動か
実際に見たほうが早いですね。
p{
width:40%;
margin-right: auto;
}
margin-right:auto;にしています。 ⇐⇐⇐⇐⇐⇐
一見、横幅が小さくなっただけに見えますが実際は左によっています。
p{
width:40%;
margin-left: auto;
}
margin-left:auto;にしています。 ⇒⇒⇒⇒⇒⇒
こちらは見てわかるように右によっています。
margin-rightとleftを同時に指定する
p{
width:40%;
margin-left: auto;
margin-right: auto;
}
margin-leftとmargin-rightをautoにしています。 ⇒⇒⇒⇒⇒⇒真ん中に寄る⇐⇐⇐⇐⇐⇐
margin-rightとleftを同時に指定すると真ん中によりましたね。
margin:0 auto;はこれに加えて、margin-topとmargin-bottomの値が「0」ということになります。
実際のコードで再確認しましょう。
p{
margin: 0 auto;
/* 同じ意味 */
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
どちらの書き方も同じ意味ですが、より短く記述するという点でmargin: 0 auto;がよく使われます。
よくやりがちなミス
よくやりがちなミスで、margin-bottomなどを指定した後に、margin:0 auto;を指定してしまうことがあります。
もちろん最初に指定したmargin-bottomなどは上書きされてしまうので気を付けましょう。
p{
margin-bottom: 40px;/*上書きされて効果がなくなる*/
margin: 0 auto;
}
margin:0 auto;が効かない時の対処法
margin:0 auto;が効かない時は以下のことを確認しましょう。
- displayの値が「inline」「inline-block」以外になっているか
- widthを指定しているか
上記の他にもpositionやfloatを使っている要素にmargin:0 auto;をかけても効かないので、確認してみてください。
