プログラミング

【CSS】「margin: auto;」が効かない場合の対処法とその理由を分かりやすく解説

今回は「margin: auto;」が効かない場合の対処法とその理由を分かりやすく解説します。

 




margin: auto;が効かない場合の対処法

margin:auto;が効かない場合は、適用させたい要素のCSSにwidthを記述しましょう

widthを記述することで、margin: auto;が適用されます。

margin: auto;にwidthが必要な理由

widthによって要素の幅を決めないとmarginの幅が決まらないので、margin:auto;が効かなくなってしまいます。

数式で表すと分かりやすいです。

表示される要素の幅を「x」、marginの幅を「y」と、ブラウザの幅を「z」と置いたとき、これらの関係は次の数式であらわすことができます。

z=x+y

  • x:要素の幅(width)
  • y:marginの幅
  • z:ブラウザの幅

「z」(=ブラウザの幅)は具体的な数字で表すことができるので、変数は「x」「y」の2種類になります。

もし「x」に具体的な数字が入らなければ、「x」と「y」の組み合わせは無限になりますので、margin: auto;で明確な数字が導き出せず、margin: auto;が効かなくなってしまうのです。

したがって、widthで具体的な値を指定し、auto(自動)で算出するmarginの値を決めてやらねばなりません。

widthの値はパーセントでも良い

ちなみに、widthの値は「~px」だけではなく「~%」でも良いです。

一見、%(パーセント)だと具体的な数値が指定されておらずmargin:auto;が効かなくなりそうですが問題ありません。ちゃんと効きます。

なぜなら、「x」を「z」を使った値に置換することができるからです。

例えば、widthの値が80%の場合を見ていきましょう。

widthの値が80%の場合、これはブラウザ幅に対して80%という意味にあります。この場合の「x」と「z」の関係は次のとおり。

x=0.8z

これを、一番最初の式に置換すると、

z=x+y → z=0.8z+y ⇔ 0.2z=y

「z」はブラウザの幅なので具体的な数字が入るため、「y」(margin)は具体的な値となります。

したがって、widthの幅を%で指定しても、margin: auto;は正常に機能します。

今回のまとめ(margin: auto;)

というわけで、今回のまとめです。

  • margin: auto;が効かない場合は、widthを記述する
  • widthがないと、「margin」「要素」「ブラウザ」の幅の関係性が決まらないためmarginを自動算出できなくなる。

 




COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です