margin:0 autoで要素が中央ぞろいにならない

Question

基本的なことなのですが、要素がmargin:0 auto;で中央ぞろいにならないです。
いまいち、中央ぞろいになるときとならないときの区別が分かりません。

<section class="works">
  <h1>WORKS</h1>
  <section>
    <img src="img/work1.png" alt="work">
    <h1>勇者ゲーム</h1>
    <p>楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。<br>
      楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。
    </p>
  </section>
</section>

.works{
  margin: 0 auto;
}

.works > h1{
  text-align: center;
}

Answer 1

margin: 0 auto;の意味は余白を左右に均等に分配することでその要素が中央にされる。
h1要素はブロックレベル要素なので、幅を指定しないと親要素の幅一杯に広がる。
左右の余白がないのでmargin: 0 auto;自体が意味がない。
ということです。
親ブロックより小さい幅を設定すると中央配置されます。
h1要素に背景色を付けるか境界線を表示させると動作がよく分かると思います。
divなどの他のブロックレベル要素も同様です。

インライン要素（テキストコンテンツ <a> <span> <img> など）はmargin: 0 auto;は効きません。
インライン要素を中央寄せする場合は、親要素に text-align: center; を指定します。

Comments

[dobashi]

hatena193さん、ご回答ありがとう御座います。
横いっぱいになっているから、中央に移動しなかったのですね。

とてもよく理解できました。親要素より小さい幅にして試してみます。ありがとう御座います。

Answer 2

.worksが画面幅いっぱいに広がっているので、余白を自動で付けても中央寄せになりません。
.worksにwidth:50%;などを付けてあげると、.works自体が中央寄せになることが確認できると思います。
.worksの中身を中央寄せにしてあげる方法はtext-align: center;を.worksにつけることです。
※他にも方法はあります。

Comments

[dobashi]

ありがとう御座います。

横幅を小さくすると、効くというのは理解できました。

text-alignは、その中身を移動させるというイメージでしょうか。

[退会済みユーザー]

> text-alignは、その中身を移動させるというイメージでしょうか。

その認識で合っています。
hatena19さんが説明してくれていますが、
インライン要素（基本的に中身のパーツ）を真ん中に寄せるための記述になります。

[dobashi]

なるほど。インライン要素を真ん中に寄せるときなのですね。