【CSS】要素の左右真ん中揃え

スポンサーリンク

※本サイトにはプロモーションが含まれています

忘れがちな要素の左右真ん中揃え、
備忘録がてらシチュエーション別にまとめてみました。

インライン要素の左右真ん中揃え

HTML

CSS

プレビュー

インライン要素の左右真ん中揃え


ブロック要素の左右真ん中揃え

HTML

CSS

プレビュー

ブロック要素の左右真ん中揃え

擬似要素にpositionを使った時の、左右真ん中揃え

HTML

CSS

プレビュー

これ親要素

ポイントは、擬似要素はインライン要素なので、display: block;と幅を指定することです。


flexboxの左右真ん中揃え

HTML

CSS

プレビュー

flexboxの

左右真ん中揃え

わかりやすいようにmargin入れてます。
flexboxは、これまで面倒だったレイアウトも簡単に再現できて便利です!


まとめ

自分は特に擬似要素×positionの場合を忘れがちなので、これで確認します!
CSSって楽しいーー!!

コメント

タイトルとURLをコピーしました