こんにちは、tanaka です。
「cssの左右の中央寄せがわかりにくい」
そう思ったことはありませんか？
ざっくり言ってしまうと
「text-align: center」を親要素へ入れる。
これで中央へ来ます。
ただし
「display: block」の時だけ話が変わります。
「display: block」は「display: block」が入ってるところへ「margin: 0 auto」を入れます。
display: block;
margin: 0 auto;このような感じです。
なので
中央寄せは、
「text-align: center」でOK！
「display: block」の時だけ「margin: 0 auto」
このように覚えてください。
しかし
中央寄せには、上に書いた中央寄せを含め２種類あります。
１：要素の中央寄せ
２：要素内の中央寄せ
詳しく説明します。
＜コピー、ペーストすると文字化けします＞
このページのコードをコピー、ペーストすると
「ダブルクオーテーションなどの一部が文字化け」
して正常に機能しなくなります。
十分ご注意ください。
２種類の中央寄せ
中央寄せには「２種類」あります。
１：要素の中央
２：要素内の中央
詳しく説明します。
＜１：要素の中央＞
要素の中央とは、
１：「display: block」
２：「display: inline」
３：「display: inline-block」
これらを中央へ持ってくることです。
＜２：要素内の中央＞
要素内の中央とは「display: block」「display: inline-block」これらの中に入っている。
１：文字
２：画像
これらを中央へ持ってくることです。
要素の中央
要素の中央は、
| display: inline | 親要素へ「text-align: center」 |
| display: inline-block | 親要素へ「text-align: center」 |
| display: block | display: block; margin: 0 auto; |
このようになります。
ほとんど「text-align: center」を親要素へ入れておけば何とかなります。
「display: block」の時だけ、
親要素ではなく「display: block」と同じところへ「margin: 0 auto;」を入れます。
要素内の中央
要素内にある「文字」「画像」を中央へ寄せたいときは、
| display: inline | 左右の指定ができない |
| display: inline-block | display: inline-block; text-align: center; |
| display: block | display: block; text-align: center; |
display: 〇〇;と同じところへ「text-align: center;」を入れます。
display: inline-block;
text-align: center;display: block;
text-align: center;まとめ
要素の中央寄せは、
ほとんどの場合「text-align: center」でOK
「display: block」の時だけ
display: block;
margin: 0 auto;要素内の中央寄せは、
全部「text-align: center」。
display: inline-block;
text-align: center;display: block;
text-align: center;ただし
「text-align: center」は、継承するので気を付けてください。
以上、
cssの中央寄せは「margin: 0 auto」「text-align: center」どちらかを使う
の説明した。
ありがとうございました。