【HTML/CSS】blockとinlineで変わる中央寄せの方法

中央寄せの方法がいまいちピンと来なかったので、メモっときます！

中央寄せの方法

中央寄せについては主に２つあります。

• margin: 0 auto;
• text-align: center;

２つの特徴は？

[ margin: 0 auto; ] ではcssを指定したタグを中央寄せします。

[ text-align: center; ] ではcssを指定した子要素を中央寄せします。

さらに！

[ margin: 0 auto; ] はブロック要素に使えます。

[ text-align: center; ] はインライン要素に使えます。

実際に試してみた！

まずは、[ margin: 0 auto; ] で中央寄せしてみます。

• block要素に適用

  親要素

  block要素
• inline要素に適用

  親要素

  inline要素
• inline-block要素に適用

  親要素

  inline-block要素

 ブロック要素だけが中央寄せになっていることが分かります。

※幅が１００％のときは [ margin: 0 auto; ] は使えません

次に [ text-align: center; ] で中央寄せしてみます。

• block要素に適用

  親要素

  block要素
• inline要素に適用

  親要素

  inline要素
• inline-block要素に適用

  親要素

  inline-block要素

 インライン要素とインラインブロック要素が中央寄せになっていることが分かります。