CSS2

cssの横の中央寄せについて自分なりにまとめてみた。

 横の中央寄せについて

要素を横の中央に配置する場合にどのコードを書けば良いか分からなかったので、整理してみました。
まず、位置を変えたいのはどの要素の（ブロック要素なのかインライン要素なのか）、どの部分（要素本体のかたまりなのか要素の中の文章だけなのか）か、により変わってくるのかなと理解しました。
自分の中でわかりやすい様に全て中央寄せで揃えましたが、時と場合によって右や左に変えて使えます。

 例えば①の場合は<p>の要素本体を中央に配置したい場合です。

上のフローチャートの一番上から順番に、まず中央寄せしたいものが<p>要素の場合、「ブロック要素」に進みます。
そして要素本体（背景が青になっている部分）の位置を設定したい場合は「要素ごと」に進みます。
その場合、margin-left:auto; margin-right: auto; を指定するというのが正しい設定方法になります。

 ②は同じ<p>の要素ですが、要素の中身の文章のみ中央に配置しています。

この場合は中央寄せにしたい文章や画像が含まれる要素、またはその親要素に対してtext-align:centerを指定します。
結果はDivの中身の文章だけが中央に配置されています。
これに関しては親要素の<div>に書いても<p>に書いても文章は中央揃えになりますが、親要素に指定するともちろん親要素の中の文章は全て中央寄せになります。

text-align:centerを<p>に書けば<p>の中身の文章だけ中央寄せになります。

 ③はlabelの中の文章を中央に配置する場合です。

理解するためにまとめているので中央寄せにしてありますが、これは右寄せにすることが多いと思われます。
インライン要素の場合は「要素のサイズ＝中身のサイズ」なので要素のサイズを変えない場合は使うことは無いと思われる。
下記の様な場合にラベルのサイズを指定し、文章の位置を分かりやすい位置に変える。
注意としては、要素のサイズを変える時にdisplay: inline-block;の記述をしないといけない。