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

画像blog-celector004

こんにちは、tanaka です。

「cssの左右の中央寄せがわかりにくい」

そう思ったことはありませんか?

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

 1:親要素から見ての中央
 2:要素内の中央

詳しく説明します。

文字化けします

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

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

十分ご注意ください。

css2種類の中央寄せ

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

 1:親要素から見ての中央
 2:要素内の中央

それぞれ説明します。

1:親要素から見ての中央

画像blog-celector002

親要素から見ての中央は、
子要素のdisplayの状態で使うプロパティが変わります。

子要素が「display: block」

子要素が「display: block」の時は、
その子要素へ「margin: 0 auto;」を使います。

html

<div>
 <h1>見出し</h1>
</div>

css

div {
 width: 500px;
}

h1 {
 display: block;
 width: 150px; ←(ここ とても重要です)
 font-size: 50px;
 margin: 0 auto; ←(子要素に入れる)
}

注意点は
「display: blockは、widthの指定が必要」ということです。

widthを指定しなかった場合「親要素のwidth」になってしまいます。

上の例でwidthを指定しなかった場合、
「親要素の500pxの幅」で「子要素の500px」を中央へ持ってくることになります。

(500pxの幅で500pxを動かそうとしても、動かせる隙間がまったくありません)

<displayとwidth>

displayとwidthの関係は、以下の通りです。

displayの種類widthの指定説明
inlineできないwidthは、文字量に合わせて自動調整される
inline-blockできるwidthの指定をしなかった場合は、
文字量に合わせて自動調整される
blockできるwidthの指定をしなかった場合は、
親要素のwidthを継承

子要素が「display: inline」「display: inline-block」

子要素が「display: block」以外の時は、
親要素へ「text-align: center」を使います。

html

<div>
 <h1>見出し</h1>
</div>

css

div {
 width: 500px;
 text-align: center;
}

h1 {
 display: inline-block;
 font-size: 50px;
}

text-align: centerは「継承する」ので注意

text-align: centerは、
子孫へ継承するので注意して下さい。

もし下のようにしたい場合は、

画像blog-celector001

 親要素には「text-align: center」(全体は中央へ)
 子要素には「text-align: start」(文字は左へ)

を入れて下さい。

<小まとめ:親要素から見ての中央>

画像blog-celector002
子要素が「display: block」の時はその子要素へ margin: 0 auto;widthの指定を忘れずに
子要素が
「display: inline」
「display: inline-block」の時は
親要素へ text-align: centertext-align: centerは、
継承されるので注意

2:要素内の中央

要素内の中央は、
その要素内での中央寄せです。

画像blog-celector003

中央にしたい要素へ「text-align: center」を入れて下さい。

まとめ

cssの中央寄せは2通りです。

<1:親要素から見ての中央>

画像blog-celector002
子要素が「display: block」の時はその子要素へ margin: 0 auto;widthの指定を忘れずに
子要素が
「display: inline」
「display: inline-block」の時は
親要素へ text-align: centertext-align: centerは、
継承されるので注意

<2:要素内の中央>

画像blog-celector003

中央にしたい要素へ「text-align: center」を入れる。

以上、
cssの中央寄せは「margin: 0 auto」「text-align: center」どちらかを使う
の説明した。

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

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