HTML: div の左寄せ、センタリング、右寄せ

・ブロック要素 (display: block; の要素、div, p, h1, figure など) 
　のセンタリングのサンプル。
・内側の div に width 指定があり、親要素に対してセンタリングや
　右寄せをしたい場合は margin: auto; や margin-left: auto; を
　指定します。
・ウインドの幅も変えて眺めてください。

main タグの中

div1 左寄せ
指定なし

div2 センタリング
margin: 0 auto; (上下: 0, 左右: auto)

div3 右寄せ
margin-left: auto;

続きのテキスト

(2014/05-2024/04)

◎ノート

・ブロック要素とインライン要素は別物です。
  左右配置の指定の仕方が異なります。

  ブロック要素
  display: block; が指定されている要素。
  p, div, h1, h2, li, figure など。
  センタリングする場合は margin: 0 auto; 

  インライン要素
  display: inline; が指定されている要素。
  テキスト, a, span, b, i など。
  センタリングする場合は text-align: center;