HTML/CSSにおいて、『『margin: 0 auto』で横方向の中央寄せができない時の対処法』を紹介します。
- HTML/CSSで『margin: 0 auto』で横方向の中央寄せしたい
目次
NGな記載例
以下に私が失敗したNGパターンを記載します。
NGパターン①：『width』を指定しない
中央寄せと言えば『margin: 0 auto』。
ということで横幅『width』を指定せずに『margin: 0 auto』をしてみます。
See the Pen Untitled by Hop Ichikawa (@Hop-Ichikawa) on CodePen.
中央寄せになりませんでした。
- 『width』を指定しておらず中央寄せできていません
NGパターン②：インライン要素に対し指定
横幅『width』を指定しますが、『a』『img』等のインライン要素に指定します。
See the Pen Untitled by Hop Ichikawa (@Hop-Ichikawa) on CodePen.
中央寄せになりませんでした。
- インライン要素に対し指定しているため中央寄せできていません
解決方法
では解決方法を紹介します。
OKパターン①：『width』を指定する
横幅『width』を指定した上で『margin: 0 auto』を指定します。
See the Pen Untitled by Hop Ichikawa (@Hop-Ichikawa) on CodePen.
OKパターン②：ブロック要素にする
インライン要素に『display: block』を指定しブロック要素にします。
See the Pen Untitled by Hop Ichikawa (@Hop-Ichikawa) on CodePen.
- 中央寄せできています
イメージ通りの記載ができました。
本格的にHTML/CSSを学びたい方は
本格的にHTML/CSSを学びたい方は『TechAcademy(テックアカデミー)』がオススメです。
- 現役エンジニアによるマンツーマンサポート
- はじめての副業に必要なスキルが学べる
- 無料メンター相談が可能
「短期間で集中して学びたい」「本格的に仕事にしたい」と考えている方はまずは無料メンター相談から初めて見てはいかがでしょうか
↓気になる方は下記リンクを参照
まとめ
今回は、HTML/CSSにおいて、『『margin: 0 auto』で横方向の中央寄せができない時の対処法』を紹介させていただきました。
- 『width』を指定する
- ブロック要素にする
皆さまの参考になれば幸いです。
コメント