2021.3.25

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

  • 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;を省略することもできます◎

 

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

 

Share Please

Read this too