インライン要素とアウトライン要素
cssの基礎知識です。理解してから進みましょう。
知っている方は下に進みましょう。
ブロック要素
- div
- p
- ul
- header
- footer
等々があります。まだまだ数知れずありますが徐々に慣れていきます。
https://web-firstlog.com/wp-content/uploads/2017/12/blockinline1.svg
リンクを見てもらえばわかると思いますが、要素が横いっぱいに広がり次の要素が下に配置されます。
インライン要素
- span
- a
- image
- br
などなど。こちらもブロック要素と同じでたくさんあります。
https://web-firstlog.com/wp-content/uploads/2017/12/blockinline3.svg
インライン要素は縦に並ばず横に並んでいきます。
htmlは左上に重心がある積み木のようなものなのでブロックと要素だと縦に並んでいきます。
ここまで理解できたら本題です。
と言っても簡単です。
ブロック要素はmargin 0 autoを使い、インライン要素はtext-align:centerを使います。