HTMLとCSSで左右中央寄せ-ブロック要素・インライン要素・インラインブロック要素別

HTMLとCSSの中央寄せは、HTMLの各要素でできることできないことが違うので、慣れないうちはなかなかやっかいです。

慣れたとしても、時々忘れてしまう始末・・・。頭の容量をもっと増やして記憶をとどめておけるようにしたいものです。

では、HTMLとCSSの左右中央寄せについてブロック要素・インライン要素・インラインブロック要素別に書いていきたいと思います。

ブロック要素の横中央寄せ

hタグやdiv、pタグなどのブロック要素の横中央寄せは以下の2パターンで対応可能です。

1. text-align:center;を指定する
2. ブロック要素で囲み、囲んだブロック要素にtext-align:center;を指定する

See the Pen
中央寄せ-ブロック要素 by kabosu-YN (@kabosu-yn)
on CodePen.

インラインブロック要素の横中央寄せ

imgタグなどインラインブロック要素の横中央寄せは、以下の2パターンで対処できます。

1. インラインブロック要素をブロック要素にしてtext-align:center;を指定する
2. ブロック要素で囲み、囲んだブロック要素にtext-align:center;を指定する

See the Pen
中央寄せインラインブロック要素 by kabosu-YN (@kabosu-yn)
on CodePen.

インライン要素の横中央寄せ

spanタグなどのインライン要素の横中央寄せは、
インライン要素にdisplay:block;を指定してブロック要素にし、text-align:center;を指定する。

See the Pen
横中央寄せ-インライン要素 by kabosu-YN (@kabosu-yn)
on CodePen.

以上、ブロック要素・インライン要素・インラインブロック要素別の左右中央寄せについてまとめました。
次回は、上下中央寄せについてまとめていこうと思います。