【すぐ使える】要素を左右寄せする方法はまずこの2つ！【CSS】

みなさん、こんにちは。どんぶラッコです。

今日は、要素を左右中央寄せする方法について書いていこうと思います！

左右中央に表示させる方法は様々ありますが、「これさえ覚えておけばOK！」という方法を3つに厳選してご紹介します！

そもそも… block 要素 と inline 要素

その前に、 block レベル要素と inline 要素の違いをご存知でしょうか？

どんぶラッコ

僕が初めてCSSを学んだ時、この違いがわかっておらず中央寄せの方法がに混乱しました

block要素とは <div> タグのような 、領域を示す要素です。

一方、inline要素はblock 要素の中に記述する中身です。文章などがそれに当たりますね。

今はざっくり、要素には２種類のタイプがあるんだな〜程度に考えておけば大丈夫です！

どんぶラッコ

本当はもう何種類かありますけどね。というかこの記事の後半でももう1種類紹介しますけどね

グランくん

最初から詰め込みすぎると混乱するから、まずは2種類あるということだけ覚えておこう！

ここで種類を紹介したのには理由があります。

それは、各要素毎で左右中央寄せの方法が異なるからです。

ということで、お待たせしました、いよいよ左右中央寄せの方法を確認していきましょう！

① [inline要素に有効] text-align:center を使う

まずは text-align:center を使う方法です。

  <section>
    <h2>方法1: text-align:center を使う</h2>
    <p class="no1-tac">左右中央</p>
    <small>
      ※div(block)要素には効かない
    </small>
    <div class="no1-tac">
      <div class="box"></div>
    </div>
  </section>

.no1-tac {
  text-align: center;
}

/* 以下省略 */

では、この方法のポイントです。

先ほど inline要素は blockレベル要素の中身だというお話をしました。

text-align:center は inline要素の並び方を指定しています。

なので、blockレベル要素に対して、君の中身のinline要素は中央寄せしてね！という指令を出さなくてはいけないのです。

今回は <p>タグというblock要素に対して中央寄せ指令を出していることになりますね。

グランくん

よくある間違いとして 中央で動かない！ なんかがあります。 spanはinline要素なので、cssが動かないんですね。

② [block要素用] margin 0 auto を使う

次はblock要素用の CSS指定です。

  <section>
    <h2>方法2: margin:0 auto を使う</h2>
    <small>
      ※文字(inline)要素には効かない
    </small>
    <p class="no2-margin">左右中央</p>
    <div class="box no2-margin"></div>
  </section>

.no2-margin{
  margin: 0 auto;
}

/* 中略 */

.box {
  background-color: #aaa;
  width: 80px;
  height: 80px;
}

次は margin を使う方法です。こちらは逆に blockレベル要素に対して使うものになります。

まずは margin の文法を確認しておきましょう。

Chrome の Dev Toolで確認するとその様子がわかりますね

次に、今回のポイントです。

特に2つ目のポイントは陥りがちな失敗です。

block要素は特に横幅を指定しなければ画面いっぱいに横幅が広がります。

今回は 横幅50pxを指定しているのでいい感じに中央寄せされるわけですね。

実はもう一つ方法があるのですが… それはまた次回！

今回のサンプル

See the Pen 左右中央寄せのサンプル – proglearn by cha1ra (@cha1ra) on CodePen.