More than 3 years have passed since last update.

CSSで中央寄せする方法

Posted at 2020-11-30

はじめに

　よく使う要素の中央寄せ。いまだにうまく動いてくれないことが多々あるが、今日の学びでこれだけは！

それぞれの特徴についてはここではあげないが、そもそもインライン要素とブロック要素とで、中央寄せの方法が違うことを理解する。

「インライン要素」という文字を中央寄せしたいとして、

<div class="parent">
    <span class="inline">
        インライン要素
    </span>
</div>

.parent {
 text-aline: center;
}

親要素にtext-aline: center;を当てる。

「ブロック要素」という文字を中央寄せしたいとして、

<div class="parent">
    <div class="block">
        ブロック要素
    </div>
</div>

.parent {
 width: 500px
}

.block {
 width: 20px
 margin: 0 auto;
}

中央寄せさせたい要素自体にに margin: 0 auto;を当てることで、親要素の大きさの中央に寄る。

　恥ずかしながら、あまりブロック要素・インライン要素を意識していなくて、毎回 margin: 0 auto;をして、うまくいかずに悩んでいた。