オンラインPC館

センタリング

Flexboxで中央寄せ

Flexboxで中央に配置する方法です。

親要素 {display:flex; justify-content:center; align-items:center;}

タイプ別のセンタリング

テーブルの中央寄せ

テーブルの中央寄せは、以下のように記述すると可能です。
この方法はページ全体の中央寄せにも利用される一般的な手法です。

table {margin-left:auto; margin-right:auto;}

インラインの中央寄せ

インラインの中央寄せは、以下のように記述すると可能です。
効いてないと思ったら、強制的にインライン要素にする事で対応できると思います。

  1. 要素 {text-align:center;}
  2. 要素 {display:inline; text-align:center;}(強制的にインライン要素にする)

ブロックの中央寄せ

ブロックの中央寄せは、以下のよう記述すると可能です。
効いてないと思ったら、強制的にブロック要素にする事で対応できると思います。

  1. 要素 {margin:0 auto;}
  2. 要素 {display:block; margin:0 auto;}(強制的にブロック要素にする)