中央寄せについて

今回は中央寄せをするということについて書いていこうと思います！！

レイアウトをしていていつも迷うのが
margin: 0 autoを使うかtext-align: center; を使うか、、、、
分からなくなってしまうので今回はここについて
自分なりに見返したらすぐわかるように書いていきたいと思います。

margin: 0 auto;を使うとき

＜div＞などのブロック要素を中央にしたい時に使う！

index.html

<div class="container">
    <h1>HELLO WORLD</h1>
    <p>さっそくプログラミングをやってみよう！</p>
</div>

stylesheet.css

.container {
    width: 1170px
    padding: 0 15px
    margin: 0 auto;
}

こんな感じでブロック要素を中央にするときに使用します。
注意するのは必ずwidth を指定してあげるのを忘れないことです！！

text-align: center;を使うとき

これはテキストや＜a＞＜img＞などのインライン要素が中央になる！

index.html

<div class="world">
    <a href="#">world</a>
</div>

stylesheet.css

.world {
    text-align: center;
}

これでdiv要素の中でaタグが中央寄せになりました。
ここで注意するのは親要素にあてることです！！

まとめ

margin: 0 auto;

• ブロック要素が中央寄せになる
• 要素全体にあてる
• 要素の幅を指定してあげる

text-aligin: center;

• インライン要素が中央寄せになる
• 親要素にあてる

こんな感じでこれからは使い分けができるようになることを祈って🙏

今回はここまで！
ありがとうございました。