cssの中央寄せは「margin: 0 auto」「text-align: center」どちらかを使う

画像blog-celector004

こんにちは、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」

このように覚えてください。

しかし

中央寄せには、上に書いた中央寄せを含め2種類あります。

1:要素の中央寄せ
2:要素内の中央寄せ

詳しく説明します。

文字化けします

<コピー、ペーストすると文字化けします>

このページのコードをコピー、ペーストすると
「ダブルクオーテーションなどの一部が文字化け」
して正常に機能しなくなります。

十分ご注意ください。

2種類の中央寄せ

中央寄せには「2種類」あります。

 1:要素の中央
 2:要素内の中央

詳しく説明します。

<1:要素の中央>

要素の中央とは、

1:「display: block」
2:「display: inline」
3:「display: inline-block」

これらを中央へ持ってくることです。

<2:要素内の中央>

要素内の中央とは「display: block」「display: inline-block」これらの中に入っている。

1:文字
2:画像

これらを中央へ持ってくることです。

要素の中央

要素の中央は、

display: inline親要素へ「text-align: center」
display: inline-block親要素へ「text-align: center」
display: blockdisplay: block;
margin: 0 auto;

このようになります。

ほとんど「text-align: center」を親要素へ入れておけば何とかなります。

「display: block」の時だけ、

親要素ではなく「display: block」と同じところへ「margin: 0 auto;」を入れます。

要素内の中央

要素内にある「文字」「画像」を中央へ寄せたいときは、

display: inline左右の指定ができない
display: inline-blockdisplay: inline-block;
text-align: center;
display: blockdisplay: 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」どちらかを使う
の説明した。

ありがとうございました。

タイトルとURLをコピーしました