2016-08-14

「marigin: 0 auto;」は要素にwidthが設定されてないと効果がない

はじめに

画面の両端のマージンを揃えて、要素を中央揃えにするCSSの手法として「margin: 0 auto;」とする事がありますが、web製作を始めたばかりのころは、これを設定したのに「あれ?中央ぞろえにならないぞ?」という事が度々ありました。その理由についてメモしておきます。

中央揃えにならない理由

理由は簡単で、中央揃えにしたい子要素の幅(width)が、親要素の幅と同じだからです。基本的なことですが、「margin: 0 auto;」の「0」は要素の縦(height)のマージンを0に、「auto」は幅(width)のマージンを左右均等に割り振るという意味なので、子要素の幅が親要素の幅に対して100%、つまり要素の左右のマージンが1pxもない状態では中央揃えになり様がないのです。

親要素と同じ幅になっている原因としては、子要素に幅を指定しておらず、自動的に親要素と同じ幅の設定になってしまっている、というのが主な理由でしょう。

CSS
画面表示
幅が未設定の場合

対策

中央揃えにしたい要素に、幅を設定すれば解決です。親要素の幅が500pxのとき、子要素の幅を400pxと設定し、子要素に「margin: 0 auto;」を指定することで、左右100pxずつマージンが割り振られ、中央揃えになります。

CSS
画面表示
幅を設定した場合

要素の幅がどこからどこまであるのか、というのは要素の背景に色を付けていたり、線で囲んでいたりしないと、意外と分かりにくいものです。

さいごに

web製作を学び始めた初期のころは「margin: 0 auto;」が「書いておけばなんでも中央揃えにする魔法の設定」みたいに勘違いしてしまっていて、上手くいかないときはヤキモキしましたが、少し内容を紐解くと、仕組みがわかって納得しました。結構、多用する設定だと思うので、原理をしっかり覚えておきたいところです。



コメントする(※は必須項目です)













画像認証