要素をセンターに寄せる【CSS基礎】

テキストや画像をセンターに寄せる

テキストや画像をHTMLに記述する場合は、まず親要素となるタグでくくる必要があります。今回はテキストや画像をpタグでくくってみました。

<p>
  <img src="momo.jpg" alt="桃が流れてくる絵">
</p>
<p>
  むかしむかしあるところに、<br>
  おじいさんとおばあさんがすんでいました。
</p>

この様に画像やテキストをpタグでくくり、その中身をセンターに寄せたい場合は、CSSを次の様に記述します。

p {
  text-align: center;
}

インラインボックス要素をセンターに寄せる

aタグやspanタグの様な、「インラインボックス要素」をセンターに寄せる場合も、テキストや画像をセンターに寄せる手順と同じです。

<p>
  <a href="#">お問い合わせはこちら</a>
</p>

p {
  text-align: center;
}

ブロックボックス要素をセンターに寄せる

pタグやdivタグなどの「ブロックボックス要素」はtext-align: center;を使ってもセンターに寄せることは出来ません。ではブロックボックス要素をセンターに寄せる場合のCSSを見てみましょう。

<div>
    <p>
      むかしむかしあるところに、<br>
      おじいさんとおばあさんがすんでいました。
    </p>
</div>

この様なコードの場合、次のような表示になります。

divタグ pタグはどちらも「ブロックボックス要素」です。「ブロックボックス要素」はブラウザの幅いっぱいに領域を確保します。そのためdivタグはブラウザの幅いっぱいになり、pタグも親要素（divタグ）の中で幅いっぱいに領域を確保します。このままではpタグ自身が移動する余白が無いので、CSSを追加してpタグの幅を半分にします。

p {
  width: 50%;
}

pタグにwidth: 50%;を設定して「親要素（divタグ）」の半分のサイズにします。

結果pタグの幅は親要素の半分のサイズになりました。さらにCSSを追加してみましょう。

div {
  text-align: center;
}
p {
  width: 50%;
}

divタグにtext-align: center;を設定します。CSSはHTML上で、先に出てくるものを上に書くほうが分かりやすいので、pタグの上にdivタグを追記しました。

結果、pタグの中のテキストはセンター寄せになりましたが、pタグ自体はセンター寄せになりませんでした。つまりtext-align: center;では「ブロックボックス要素」をセンター寄せにできない、ということが分かります。

ブロックボックス要素をセンターに寄せるためには、親要素ではなく要素自身にmargin: 0 auto;追加します。

div {
  text-align: center;
}
p {
  width: 50%;
  margin: 0 auto;
}

marginは要素の外側の余白です。左右の値にautoを入れると、余白を均等に分配するような動きとなります。

その結果「ブロックボックス要素」自身をセンターに寄せることができます。

まとめ

要素の種類	CSSの適用先	CSSのプロパティと値
テキスト・画像	親要素	text-align: center;
インラインボックス要素
インラインブロックの要素
ブロックボックス要素	要素自身	margin: 0 auto;