30DAYSトライアルのDAY13〜で作成したLPをもとに、実際の企業のLPを作ってみようと思ったら、
という事象にぶちあたって苦労したので、解決方法を残しておきます。
Contents
そもそも「margin: 0 auto;」とは
「margin: 0 auto;」は、ブロック要素を中央寄せするコードです。
ブロック要素(divとか)に幅を指定して「margin: 0 auto;」にすれば、その要素は中央寄せになる。
という時は、
- 幅を指定しているか
- ブロック要素に対して指定しているか
これらの条件をクリアすれば中央寄せになるはずです。
See the Pen
margin0auto by あやたろう@独女リゾートエンジニアの卵 (@aya2kiku)
on CodePen.
上記のCSSでは、
- width: 60%; → 幅を指定
- margin: 0 auto; → div(ブロック要素)の中央寄せ
となります。
下記の2行は、「中央寄せ」を視覚的にわかりやすくするためだけに書いているので、今回のテーマには直接的に関係はありません。
- text-align: center; → テキストの中央寄せ
- background: yellow; → 要素の幅を見える化
「margin: 0 auto;」が効かない原因は?
「margin :0 auto;」の使い方を踏まえて、下記のコードで中央寄せにならないのは何故でしょう?
See the Pen
absolute by あやたろう@独女リゾートエンジニアの卵 (@aya2kiku)
on CodePen.
widthで幅は指定しているし、divはブロック要素なのに中央寄せになっていません。
あからさまに怪しい「position: absolute;」をコメントアウトしてみます。
See the Pen
absolute_out by あやたろう@独女リゾートエンジニアの卵 (@aya2kiku)
on CodePen.
中央寄せになりました!
「position: absolute;」が「margin: 0 auto;」を無効化していると見て間違いなさそうです…。
「position: absolute;」とは
「position: absolute;」は、要素の位置を【親要素を基準とした絶対値】で指定できるコードです。
サルワカさんの記事で、イラストを混じえてめっちゃわかりやすく解説されているので、詳細はそちらでご確認いただければと。
で、さきほどのCSSは、「親要素を基準にして、上から30%の位置に配置」とだけ指定して、横位置に関しては何も指定していません。
このため、
- 上から30%
- 左寄せ(初期値)
に固定されてしまい、「margin: 0 auto;」で中央寄せにすることができなかったのですね。
では、「position: absolute;」を使いつつ中央寄せにするにはどうすればいいのでしょうか。
「position: absolute;」で中央寄せにする方法は?
「position: absolute;」を使いつつ中央寄せにする方法は下記の通り。
See the Pen
absolute_center by あやたろう@独女リゾートエンジニアの卵 (@aya2kiku)
on CodePen.
- left : 0;
- right: 0;
を追加して、
- margin: 0 auto; → margin: auto;
に変更しています。
「position: absolute;」を使いつつ中央寄せにしたい時は、
left : 0;
right: 0;
margin: auto;
に設定!
※widthの指定も忘れずに
※設定だけを覚えてしまうのもアリですが、「なぜそうするのか?」という根拠はWWW WATCHさんのサイトで詳細に解説されています。
ちょっと難しい内容ですが、納得して覚えたい派の人は読んでおいて損はないと思いますので、この機会にぜひ。