ホーム(記事一覧)へ

justify-content(中央寄せなど)が効かない原因と解決方法4選

justify-contentは横位置を調整するCSSです。

でも思った位置になってない?ずれている?効いていない?

justify-contentが効かない原因と解決方法を4つ紹介します。

justify-contentの基本はこちら↓

【原因1】flexを指定していない

justify-contentはdisplay:flexとセットで使うCSSです。

左右中央揃えの方法などでよく紹介されているjustify-contentですが、display:flexが指定されていないと使えません。

失敗例】中央寄せしたいのに効いてない

1
<style>
.example{
    /*コレが効いてない*/justify-content: center;
    border: 1px solid #999;
    background: #ffeb00;
}
.example>div{
    width: 30%;
    box-sizing: border-box;
    padding: 10px;
    background: #b8dbf8;
}
</style>
<div class="example">
    <div>1</div>
</div>

解決方法

display:flexを指定しましょう。

displayがblockなどに書き変わっていないかもチェックしましょう。

1
<style>
.example2{
    /*コレを追加*/display: flex;
    justify-content: center;
    border: 1px solid #999;
    background: #ffeb00;
}
.example2>div{
    width: 30%;
    box-sizing: border-box;
    padding: 10px;
    background: #b8dbf8;
}
</style>
<div class="example2">
    <div>1</div>
</div>

念のためflexが効かない原因も確認しておきましょう。↓

【原因2】marginを指定している

子要素に「margin:auto」など指定した上で「justify-content: flex-end(右寄せ)」をしようとしても中央寄せになってしまいます。

これはmarginが効いた後に残りの隙間でjustify-contentが計算され横位置が調整されるためです。

【失敗例】右寄せしたいのに中央寄せになる

1
<style>
.example3{
    display: flex;
    /*コレが効いてない*/justify-content: flex-end;
    border: 1px solid #999;
    background: #ffeb00;
}
.example3>div{
    /*コレが原因*/margin: auto;
    width: 30%;
    box-sizing: border-box;
    padding: 10px;
    background: #b8dbf8;
}
</style>
<div class="example3">
    <div>1</div>
</div>

解決方法

子要素のmarginを削除しましょう。

意図的な調整をしたい場合はautoではなく数値で指定しましょう。

1
<style>
.example4{
    display: flex;
    justify-content: flex-end;
    border: 1px solid #999;
    background: #ffeb00;
}
.example4>div{
    /*コレを削除margin: auto;*/
    width: 30%;
    box-sizing: border-box;
    padding: 10px;
    background: #b8dbf8;
}
</style>
<div class="example4">
    <div>1</div>
</div>

【原因3】beforeやafterがある

display:flexは子要素の位置調整をするCSSですが、beforeやafterも子要素に含まれます。

子要素をすべて含んで計算されるため思った位置になりません。

【失敗例】微妙に中央から右にずれている

1
<style>
.example5{
    display: flex;
    justify-content: center;
    border: 1px solid #999;
    background: #ffeb00;
}
.example5>div{
    width: 30%;
    box-sizing: border-box;
    padding: 10px;
    background: #b8dbf8;
}
.example5::before{
    content: "before";
    background: #f0a1a1;
}
</style>
<div class="example5">
    <div>1</div>
</div>

解決方法

beforeやafterを指定する必要がある場合はもう一つの要素で囲いましょう。

display:flexは孫要素までは影響がないためです。

1
<style>
.example6{
    display: flex;
    justify-content: center;
    border: 1px solid #999;
    background: #ffeb00;
}
.example6>div{
    width: 30%;
    box-sizing: border-box;
    padding: 10px;
    background: #b8dbf8;
}
.example6>div::before{
    content: "before";
    background: #f0a1a1;
}
</style>
<div class="example6">
    <div>1</div>
</div>

beforeやafterが不要な場合は「content:none」で消してしまいましょう。

【原因4】flex-direcion:columnで縦並びにしている

flex-direcionはflex内の子要素の方向と順番を指定するCSSです。

flex-direcion:columnを指定すると子要素が縦並びになります。

このときjustify-contentは縦方向の位置調整に変わります。

よってjustify-contentが効いていないように見えます。

【失敗例】中央寄せしたいのに効いてない

1
<style>
.example7{
    display: flex;
    /*コレが効いてない*/justify-content: center;
    /*コレが原因*/flex-direction: column;
    border: 1px solid #999;
    background: #ffeb00;
}
.example7>div{
    width: 30%;
    box-sizing: border-box;
    padding: 10px;
    background: #b8dbf8;
}
</style>
<div class="example7">
    <div>1</div>
</div>

【解決方法】

align-itemsで位置調整しましょう。

align-itemsは本来縦の位置を調整するCSSですが、flex-direcion:columnで縦並びになっているときは横方向の位置調整になります。

1
<style>
.example8{
    display: flex;
    /*コレは不要justify-content: center;*/
    /*コレを追加*/align-items: center;
    flex-direction: column;
    border: 1px solid #999;
    background: #ffeb00;
}
.example8>div{
    width: 30%;
    box-sizing: border-box;
    padding: 10px;
    background: #b8dbf8;
}
</style>
<div class="example8">
    <div>1</div>
</div>

flex-direcion:columnの指定が意図的でないのなら削除またはflex-direction:rowを指定して横並びに戻すとjustify-contenが効くようになります。

【まとめ】justify-contentが効かない原因と解決方法

  • 【原因1】flexを指定していない
    display:flexを指定しましょう。
  • 【原因2】marginを指定している
    子要素のmargin:autoを削除しましょう。
  • 【原因3】beforeやafterがある
    beforeやafterが孫要素になるようにしましょう。
  • 【原因4】flex-direcion:columnで縦並びにしている
    align-itemsで位置調整しましょう。

以上、justify-content(中央寄せなど)が効かない原因と解決方法4選でした。

関連記事