【css】可変幅のブロック要素を中央寄せする方法

要素の幅が可変する場合、通常の

margin: 0 auto;

ではうまくいきません。

ではどうするか。以下のコードを参照してください。

See the Pen
WNRreGG by nanami (@nanami_po)
on CodePen.

親要素にtext-align: center;、子要素にdisplay: inline-block;を指定してあげるとうまくいきます。

例えばこのような装飾を施したい場合などに活用できます。

See the Pen
GRroKvg by nanami (@nanami_po)
on CodePen.

ちなみに、中身の要素がテキストのみの場合なら

See the Pen
OJWMLQN by nanami (@nanami_po)
on CodePen.

このようにspanで囲むことで子要素のdisplay: inline-block;を省略することもできます◎

ぜひ参考にしてください。

CSS設計完全ガイド　〜詳細解説＋実践的モジュール集

posted with ヨメレバ

半田 惇志 技術評論社 2020年02月27日頃

楽天ブックス

楽天kobo

Amazon

Kindle

honto

紀伊國屋書店