要素の中央寄せまとめ
前提
要素を中央に寄せる場合、まず中央寄せの対象となる要素が、以下のどれになるのか確認する
ブロック要素
ex hタグ、divタグ、pタグ
インライン要素
ex spanタグ、aタグ
インラインブロック要素
display: inline-block;した要素
左右中央に寄せたいパターン
【インライン要素、インラインブロック要素の場合】
1,中央寄せにしたい要素の親要素に「text-align:center」
text-alignは文章の揃え位置を指定するプロパティのため、文章内に入る要素として扱われる。
【ブロック要素の場合】
1,中央寄せしたいブロック要素自体に「margin:0 auto」
marginは要素の外側の余白を指定するプロパテ。autoを指定すると、余白を自動的に計算してくれるので、中央に寄せた状態になる。
上下中央に寄せたいパターン
どこを基準に上下中央するのか確認
【インライン要素の場合】
中央寄せにしたい要素自体に「vertical-align:center」を指定。
【ブロック要素、インラインブロック要素の場合】
ブロック要素の上下中央揃えは、ブロック要素のままでは実現できない。displayプロパティを使って、要素の種類を変える必要がある。
横並びの要素を基準にするならば、インライン要素やインラインブロック要素にして、「vertical-align:cente」
親要素を基準に中央寄せしたい場合は、親要素に高さ、「display: table-cell」、「vertical-align:center」を指定。
参照
ブロックレベル要素・インライン要素の性質と違い
https://www.itra.co.jp/webmedia/block-inline-difference.html
この記事が気に入ったらサポートをしてみませんか?