マンガでわかるホームページ作成

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

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

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

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

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

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

結論

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

  • display:block」を指定してブロック要素にする
  • width」を指定する(auto,100%以外)

margin:autoが効かない原因

  • 要素がimgタグ(画像)・spanタグ(テキスト)・aタグ(リンク)などのインライン要素だから
  • widthが指定されていないから(あるいはwidth:autoまたはwidth:100%が指定されているとき)

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

margin:0 autoが効かない原因

原因1.インライン要素にmargin:autoを指定している

失敗例

テキスト

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が効かないときの修正方法

  • display:block」を指定してブロック要素にする
  • width」を指定する(auto,100%以外)

成功例

テキスト

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ではなく以下の方法です。

  • 親要素に「text-aling:center」を指定する。
    ※親要素はdivやpなどのブロック要素であること

成功例

テキストテキスト

テキストテキスト

<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が効かないとき

  • display:block」を指定してブロック要素にする
  • width」を指定する(auto,100%以外)

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

関連記事