はじめに

　よく使う要素の中央寄せ。いまだにうまく動いてくれないことが多々あるが、今日の学びでこれだけは！

インライン要素とブロック要素

それぞれの特徴についてはここではあげないが、そもそもインライン要素とブロック要素とで、中央寄せの方法が違うことを理解する。

インライン要素の場合

「インライン要素」という文字を中央寄せしたいとして、

<divclass="parent"><spanclass="inline">インライン要素
    </span></div>

.parent{text-aline:center;}

親要素にtext-aline: center;を当てる。

ブロック要素の場合

「ブロック要素」という文字を中央寄せしたいとして、

<divclass="parent"><divclass="block">ブロック要素
    </div></div>

.parent{width:500px}.block{width:20pxmargin:0auto;}

中央寄せさせたい要素自体ににmargin: 0 auto;を当てることで、親要素の大きさの中央に寄る。

終わりに

　恥ずかしながら、あまりブロック要素・インライン要素を意識していなくて、毎回margin: 0 auto;をして、うまくいかずに悩んでいた。