【HTML/CSS】要素を左右方向に中央寄せできないときの対処法

CSSで要素を左右方向に中央寄せしたいケースってよくあるのに、一発でうまくいくことが少ないです。

とりあえず「margin: 0 auto」を使ってみて、ダメなら「justify-content: center」を使ってみよう、みたいな感じでした。

今回は中央寄せができないよくあるケースを紹介します。

margin: 0 auto が効かない

上の画像のように、インナー要素を左右中央に寄せたい場合を見てみましょう。（コードには書いてないですが、要素に色を付けています）

HTMLコード

<div class="outer">
  <div class="inner">インナー</div>
</div>

誤ったCSSコード

.outer {
    width: 300px;
    height:100px;
}

.inner {
    margin: 0 auto;
}

結果

divのようなブロック要素は、幅を指定しなければ親要素の幅いっぱいに広がってしまうため、思った通りの結果にはなりませんでした。

では、div要素に幅100pxを指定してみます。

CSS

.outer {
    width: 300px;
    height:100px;
}

.inner {
    margin: 0 auto;
    width: 100px;
}

理想の結果に近づきましたが、100pxは「インナー」という文字幅よりも大きいため、文字の右側に空白ができてしまいます。

要素の幅と文字の幅を合わせたい場合はemという単位を使います。

CSS

.outer {
    width: 300px;
    height:100px;
}

.inner {
    margin: 0 auto;
    width: 4em;
}

結果

要素の幅が、ちょうど文字の幅ぴったりになりました。

1emという単位は、文字1文字の幅となるので、4emを指定することで4文字分の幅と等しくなります。

余白を設けたい場合は、paddingを設定してあげればOKです。

（画像は paddng: 5px; で余白を設定）

例えば、aタグで上下左右にpaddingを設定してボタンを作った場合も、幅をemで指定すればボタンの中央寄せ可能がです。

これには以下の原因が考えられます。

justify-content プロパティは display: flex; とセットであるため、justify-content 単独では効果がありません。

何らかの原因で子要素が親要素の100%になっている場合です。

このような場合、子要素は左右方向に固定されてしまうのでそもそも中央寄せという概念がなくなります。

誰かの参考になってくれたら嬉しいです。