要素の中央揃え
中央揃えにしたい要素に注目した、
-
ブロック要素だったら、幅を設定したうえで
margin:0を使用する。 - テキストや、画像などのインラインボックス要素だったら囲っているブロック要素に
text-algin:centerをつける。
下記のポイントをおさえましょう。
-
margin: 0 autoもtext-align: centerもブロックボックスにつける -
margin: 0 autoはそのブロックボックス自体を中央揃えにする -
text-align: centerは そのブロックボックスのなかにあるテキストや画像を中央揃えにする
margin:0 auto
- ブロック要素のみ有効
- 幅を設定する必要がある
margin: 0 auto;
text-align:center
- ブロック要素のみ有効
- ブロック要素の中にあるテキストや画像などのインラインボックスが中央揃えになる
=