どうも、チャーさんです。
あなたはpositionで縦に中央寄せをしたいのに、
できずに困っていませんか？
この記事ではpositionで要素を縦に、
中央寄せする方法を書いています。
そのため、あなたがこの記事を読めば、
positionで縦に中央寄せできるようになります。
なので、あなたがpositionで縦に中央寄せしたいのに、
何をしても要素がそこから張り付いて動いてくれない、
と困っていたらこのまま読んでみてください。
スポンサードサーチ
目次
positionで縦に中寄せするにはコレ
で結論から書きます。
positionで縦に中央寄せするには、
以下のことをすればできます。
- 親要素にrelativeをつける
- 縦に中央寄せしたい子要素にabsoluteをつける
- (以下は全て縦に中央寄せしたい子要素につける)
- width,heightをつける
- topとbottomを0にする
- margin: autoを するです。
これらをすると、positionを使って、
要素を縦に中央寄せすることができます。
というわけで、早速具体的なコードと
実際の実行画面をみてましょう。
補足としてこの画像でいう、
黄緑のボックス(.box2)がpositionで縦に、
中央寄せした要素です。
(こちらはcss)
(こちらはhtml)
ちゃんと縦方向に中央寄せされてますね。
という訳で、
- 親要素にrelativeをつける
- 縦に中央寄せしたい子要素にabsoluteをつける
- (以下は全て縦に中央寄せしたい子要素につける)
- width,heightをつける
- topとbottomを0にする
- margin: autoを するです。
上記をすることで、
positionを使い、要素を縦に中央寄せできます。
スポンサードサーチ
positionで縦に中央寄せする場合の注意
また注意としてpositionで縦に中央寄せする場合は、
要素がインラインかブロックかは重要なので、
そこはチェックするようにしましょう。
例えばインライン要素(aタグなど)はmarginで、
中央寄せできないです。
なので、あなたがpositionで縦に中央寄せしたい要素が、
インライン要素であれば、display:inline-blockや、
blockなどでブロック要素に変えましょう。
そして同時に、widthやheightをつけて、
高さと幅をつけてあげましょう。
そうでないと、positionで縦に中央寄せできないので、
注意するようにしてください。
スポンサードサーチ
positionで縦に中央寄せする手順
という訳でpositionを縦に中央寄せする方法を
書きます。
親要素を作りましょう。
まずはpositionで縦に中央寄せしたい要素を、
親要素の中に入れましょう。
（ちなみにこちらは中央寄せしたい場合は、要素の中で、
要素を中央寄せしたいシーンを想定してます）
子要素のチェックをしましょう
で次に、そしてその子要素が、
ブロック要素かインライン要素かをチェックしましょう。
例えばaタグとかだとインライン要素なので、
positionで縦に中央寄せするなら、
display：でブロックかインラインブロックに変える必要があります。
中央寄せの記述をつけましょう
で次に、親要素にrelativeをつけて、
positionで縦に中央寄せしたい子要素に、
absoluteをつける
width,heightをつける(インライン要素をブロックにした場合必須)
topとbottomを0にする
margin: autoをつける
これらをやりましょう。
するとpositionで縦に中央寄せできるので、
縦の中央寄せしたいなら、やってみてください。
スポンサードサーチ
まとめ
それではまとめに入ります。
あなたがpositionで要素を縦に中央寄せしたいならば、
- 親要素にrelativeをつける
- 縦に中央寄せしたい子要素にabsoluteをつける
- (以下は全て縦に中央寄せしたい子要素につける)
- width,heightをつける
- topとbottomを0にする
- margin: autoを するです。
これら上記をやりましょう。
position周りはややこしいこと多いですが、
使えるようになると便利なので、
ぜひ習得してみてください。
それでは、読んでもらってありがとうございました。
チャーさん
