margin:0 autoが効かない原因と修正方法・代替案

こんにちは。テイクです。ホームページを作り続けて9年になります。

中央寄せするために「margin:auto」を指定したのに効かなくて中央寄せにならないことがあります。

そこでCSSのmargin:0 autoが効かない原因と修正方法・代替案を説明します。

marginの基本はこちらで復習しましょう↓

padding:autoが効かない！という場合はこちら↓

margin:0 autoとは

ブロック要素に「margin:0 auto」を指定するとその要素は中央寄せになります。

「margin:0 auto」は「margin:0 auto 0 auto」と同義であり、上が0、右がauto、下が0、左がautoということです。

では右と左のautoはどういう意味でしょうか？

marginは外側の空白を操作するCSSです。autoの場合、親要素の横幅から自身の横幅を引いて、残った数値を自動計算してくれます。

そして右も左もautoの場合、ちょうど半分になるように分け合います。

これにより結果的に中央寄せになるというわけです。

なお、「margin:0 auto」ではなく「margin:auto」と指定しても同じ結果となります。上下のautoは0になるためです。

さて、これを踏まえたうえで「margin:0 auto」を指定しても効かないときの修正方法を解説します。

結論：margin:0 autoが効かないときの修正方法

margin:autoが効かない原因

以下で詳しく説明します。

margin:0 autoが効かない原因

原因1.インライン要素だから

失敗例

テキスト

html

<p><span class="center-margin">テキスト</span></p>

CSS

.center-margin{
    margin: 0 auto;/*コレが効かない*/
    border: 2px solid #999;
    width:200px;/*コレも効かない*/
}

中央寄せになっていないのはmarginがかかっている要素がインライン要素だからです。インライン要素にはwidthを指定できません。

imgタグ（画像）・spanタグ（テキスト）・aタグ（リンク）などはインライン要素です。

display:blockでブロック要素にしてやる必要があります。

インライン要素ブロック要素についてはこちら↓

原因2.widthを指定していないから

失敗例

html

<div><p class="center-margin">テキスト</p></div>

CSS

.center-margin{
    margin: 0 auto;
/*コレが効かない*/
    border: 2px solid #999;
}

子要素にmargin:autoを指定していますが中央寄せになっていません。

それもそのはず親要素と横幅が同じなので両端の空白がなく中央に寄りようがありません。

widthを指定し、親要素より幅を小さくする必要があります。

margin:autoが効かないときの修正方法

成功例

テキスト

html

<p><span class="center-margin">テキスト</span></p>

CSS

.center-margin{
    display: block;/*コレ*/
    width: 200px;/*コレ*/
    margin: 0 auto;
    border: 2px solid #999;
}

左右に余白がないと中央寄せできないためwidthを指定しましょう。

色がない枠の場合widthの指定を忘れがちなので注意しましょう。

インライン要素にはwidthを指定できないので、ブロック要素にしましょう。

なお、margin:0 autoは左右の中央寄せはできますが、margin:auto 0にしても上下中央寄せはできません。

上下中央寄せをするにはdisplay:flexを使いましょう。

中央寄せ代替案

レスポンシブデザインだからwidthを指定したくないとき

max-widthを使いましょう。

横幅がmax-width以上になったときはwidthがmax-widthで指定した数値になります。

横幅がmax-width以下になったときはwidthが100％（またはwidthで指定した値）になります。

要素内の分量に応じて自動で横幅が決まってほしいとき

display:flexとjustify-content: centerを親要素に指定します。

子要素にwidthを指定する必要はありません。

html

<div class="center-marginwrap"><p class="center-margin">テキスト</p></div>

CSS

.center-marginwrap{
    display: flex;
    justify-content: center;
}

display:flexについてはこちら↓

要素をインライン要素のまま中央寄せにしたい場合

aタグやspan、imgあるいはなんのタグもない子要素などのインライン要素を中央寄せにする場合はmargin:autoではなく以下の方法です。

成功例

テキストテキスト

<style>
.center{
    text-align: center;/*コレ*/
    border:1px solid #999;
    background: #f2f2f2;
    margin:15px;
}
</style>
<div class="center">テキストテキスト</div>
<p class="center"><a href="#">テキストテキスト</a></p>

「text-aling:center」を指定するとその中の要素のテキストすべてが中央寄せになります。

必要な部分だけdivやpで「text-aling:center」を指定しましょう。

まとめ

margin:0 autoが効かないとき

以上、CSSのmargin:0 autoが効かない原因と修正方法・代替案でした。