margin:0 auto;とtext-align:center;の使い分け

初めに

• margin:0 auto;とtext-align:center;の備忘録として書きます。

• 自分なりに調べてわかりやすい解説を参考にしながらアプトプットしていきます。

結論

• 中央寄せしたい要素がブロック要素か、インライン要素かによって変わります。 中央寄せしたい要素がブロック要素であるならば自身の要素にmargin:0 auto; 中央寄せしたい要素がインライン要素であるならば親要素text-align:center;

具体例

htmlコード

<div class="top-wrapper">
      <div class="container">
        <h1>LEARN TO CODE.</h1>
        <h1>LEARN TO BE CREATIVE.</h1>
        <p>Progateはオンラインプログラミング学習サービスです。</p>
        <p>初心者にもやさしいスライドとレッスンで、Webサービスを作りながらプログラミングを学んでいきましょう。</p>
        <div class="btn-wrapper">
          <a href="#" class="btn signup">新規登録はこちら</a>
          <p>or sign up with</p>
          <a href="#" class="btn facebook"><span class="fa fa-facebook"></span>Facebookで登録</a>
          <a href="#" class="btn twitter"><span class="fa fa-twitter"></span>Twitterで登録</a>
        </div>
      </div>
    </div>

*今回はtop-wrapperの中を中央寄せしてみます。

編集前のcssコード

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

.top-wrapper {
  padding: 180px 0 100px 0;
  background-image: url(https://prog-8.com/images/html/advanced/top.png);
  background-size: cover;
  color: white;

}

プレビュー

• top-wrapper の中身は
  でブロック要素なのでmargin:0 auto;を使いたくなる。しかし

  はwidth:1170pxとなっているため半分ブロック要素を失いインラインブロック要素になっている *よって今回はtext-align:center;を親要素であるtop-wrapperのプロパティに入れる

編集後のcss

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

.top-wrapper {
  padding: 180px 0 100px 0;
  background-image: url(https://prog-8.com/images/html/advanced/top.png);
  background-size: cover;
  color: white;text-align:center;
 ```
######編集後のプレビュー
[f:id:kyoheiex:20230705000631p:plain]


### 結語
*中央寄せしたい要素がインライン要素かブロック要素によってmargin:0 auto;またはtext-align:center;使い方が決まる
*きちんと理解するためにはインライン要素、ブロック要素、インラインブロック要素の理解が必要。
*後日インライン要素、ブロック要素、インラインブロック要素の記事を書く