13. 画像や文字などを中央に配置する text-align: center;・margin: 0 auto;

目次

p・h1~h6(ブロック要素)の中身の中央寄せ

pやh1~h6の中身を中央寄せするには、text-alignプロパティを使って、値をcenterにします。


また、text-alignプロパティの値はleft・rightもとることができ、それぞれ左寄せ・右寄せになります。
text-alignはブロック要素にのみ指定でき、その中身を左右または中央に寄せる性質があります。中身とは、上の例でいうと、<p>テキスト</p>の「テキスト」にあたります。

div(ブロック要素)自体の中央寄せ

divはブロック要素なのでtext-alignは指定できますが、これではdivの中身が中央寄せになってしまい、div自身は中央に寄ってくれません。

div自体を中央寄せするには、左右のmarginautoにすればOKです。

また、左右のmarginをautoにして中央寄せするときは、基本的にwidthもあわせて指定しておきましょう。なぜかというと、ブロック要素はwidthを指定しないと横いっぱいに広がるため、marginが設定できないからです。


※ここでは上下のmarginは0にしていますが、左右のmarginはautoで上下のmarginを自由に指定することもできます。

a・img(インライン要素)の中央寄せ

a(リンク)やimg(画像)はインライン要素なので、それ自体にtext-alignは指定できません。そのため、親となるブロック要素にtext-alignを指定する必要があります。


ただし、この場合だとaとimgはどちらもインライン要素なので、横に並んでしまいます。
縦に並ばせるためには、改行の<br>を入れるか、縦並びのdivで分けてあげましょう。


このようにうまくいきました↓↓

(補足)imgの中央寄せ

imgはdisplay:block;でブロック要素に変換すると、widthが自動的に決まるので、左右のmarginをautoにして中央寄せすることができます(widthをわざわざ指定する必要はありません)。



インラインブロック要素の中央寄せ

インラインブロック要素を中央に寄せるには、親となるブロック要素にtext-alignを指定すればOKです。


この例では、3つのdivにdisplay:inline-block;を指定して横並びにし、親のdiv(id=”parent”)にtext-align:center;を指定しています。