CSS

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

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

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

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

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

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

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

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

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

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

どんぶラッコ
どんぶラッコ
本当はもう何種類かありますけどね。というかこの記事の後半でももう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;
}

/* 以下省略 */

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

text-align:center
  • inline要素を中央揃えする方法!
  • text-align:center は blockレベル要素に対して指定する!

先ほど 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 の文法を確認しておきましょう。

margin: 0 auto

margin … 要素の外側余白を指定します

0 auto … 上下の余白は0, 左右の余白はいい感じに調整してね

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

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

margin: 0 auto; のポイント
  • block要素に対して有効
  • 対象のblock要素の横幅が指定されていなければ中央寄せされない

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

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

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


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

今回のサンプル

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

ABOUT ME
どんぶラッコ
ECコンサルタント、システムエンジニアを経て、quintet株式会社CTOに就任。普段はNuxt.jsやLaravelを使用しています。

\面白いと思ったら/

記事のシェア & Twitter のフォロー をお願いします!

@proglearn
RELATED POST

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です