ホームへ

【CSS】画像を中央寄せできない・真ん中にならない原因

「画像を中央寄せしたいのにできない!」

「画像が真ん中にならない!真ん中からちょっとずれてる」

画像を中央寄せできない原因と解決方法を、使ったCSS別に紹介します。

text-align: centerが効かないとき

画像にdisplay:blockが指定されているから

画像にdisplay:blockが指定されているとtext-align: centerは効きません。

<style>
.example img{
    /*原因*/display: block;
}
.example{
    text-align: center;
    border: 1px solid #333;
    background: #e1e8f7;
    padding: 5px;
}
</style>
<div class="example">
    <img width="300" src="cat.jpg" alt="">
</div>

画像のdisplay: blockを消すか「display: inline」か「display: inline-block」を指定しましょう。

<style>
.example2 img{
    /*削除display: block;*/
}
.example2{
    text-align: center;
    border: 1px solid #333;
    background: #e1e8f7;
    padding: 5px;
}
</style>
<div class="example2">
    <img width="300" src="cat.jpg" alt="">
</div>

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

CSS displayについて詳しくはこちら↓

画像に指定しているから

画像にtext-align: centerを指定しても中央寄せになりません。

<style>
.example3 img{
    /*画像に指定している*/text-align: center;
}
.example3{
    border: 1px solid #333;
    background: #e1e8f7;
    padding: 5px;
}
</style>
<div class="example3">
    <img width="300" src="https://csshtml.work/wp-content/uploads/cat.jpg" alt="">
</div>

text-align: centerは画像の親要素に指定しましょう。

<style>
.example4{
    /*親に指定している*/text-align: center;
    border: 1px solid #333;
    background: #e1e8f7;
    padding: 5px;
}
</style>
<div class="example4">
    <img width="300" src="https://csshtml.work/wp-content/uploads/cat.jpg" alt="">
</div>

親子要素について詳しくはこちら↓

margin: autoが効かないとき

画像にdisplay:blockが指定されていないから

margin: autoはブロック要素でないと効きません。

<style>
.example5 img{
    /*これがないdisplay: block;*/
    margin: auto;
}
.example5{
    border: 1px solid #333;
    background: #e1e8f7;
    padding: 5px;
}
</style>
<div class="example5">
    <img width="300" src="https://csshtml.work/wp-content/uploads/cat.jpg" alt="">
</div>

画像に「display: block」を指定してブロック要素にしましょう。

<style>
.example6 img{
    /*これを指定*/display: block;
    margin: auto;
}
.example6{
    border: 1px solid #333;
    background: #e1e8f7;
    padding: 5px;
}
</style>
<div class="example6">
    <img width="300" src="https://csshtml.work/wp-content/uploads/cat.jpg" alt="">
</div>

親に指定しているから

margin: autoは親に指定しても効きません。

<style>
.example7 img{
    display: block;
}
.example7{
    /*親に指定*/margin: auto;
    border: 1px solid #333;
    background: #e1e8f7;
    padding: 5px;
}
</style>
<div class="example7">
    <img width="300" src="https://csshtml.work/wp-content/uploads/cat.jpg" alt="">
</div>

画像に指定しましょう。

<style>
.example8 img{
    /*画像に指定*/margin: auto;
    display: block;
}
.example8{
    border: 1px solid #333;
    background: #e1e8f7;
    padding: 5px;
}
</style>
<div class="example8">
    <img width="300" src="https://csshtml.work/wp-content/uploads/cat.jpg" alt="">
</div>

align="center"が効かないとき

text-align:leftが指定されているから

alignはhtmlの属性です。属性とCSSが被ったときCSSが優先されます。

<style>
.example9{
    /*コレが原因*/text-align: left;
    border: 1px solid #333;
    background: #e1e8f7;
    padding: 5px;
}
</style>
<div align="center" class="example9">
    <img width="300" src="https://csshtml.work/wp-content/uploads/cat.jpg" alt="">
</div>

優先されているCSS「text-align:left」を削除しましょう。

<style>
.example10{
    /*コレを削除text-align: left;*/
    border: 1px solid #333;
    background: #e1e8f7;
    padding: 5px;
}
</style>
<div align="center" class="example10">
    <img width="300" src="https://csshtml.work/wp-content/uploads/cat.jpg" alt="">
</div>

justify-content: centerが効かないとき

display:flexを指定していないから

justify-contentはdisplay:flexがないと効きません。

<style>
.example11{
    /*コレがないdisplay: flex;*/
    justify-content: center;
    border: 1px solid #333;
    background: #e1e8f7;
    padding: 5px;
}
</style>
<div class="example11">
    <img width="300" src="https://csshtml.work/wp-content/uploads/cat.jpg" alt="">
</div>

justify-contentは必ずdisplay:flexとセットで指定しましょう。

<style>
.example12{
    /*コレを指定*/display: flex;
    justify-content: center;
    border: 1px solid #333;
    background: #e1e8f7;
    padding: 5px;
}
</style>
<div class="example12">
    <img width="300" src="https://csshtml.work/wp-content/uploads/cat.jpg" alt="">
</div>

画像に指定しているから

justify-contentは画像に指定しても効きません。

<style>
.example13 img{
    /*画像に指定*/justify-content: center;
}
.example13{
    display: flex;
    border: 1px solid #333;
    background: #e1e8f7;
    padding: 5px;
}
</style>
<div class="example13">
    <img width="300" src="https://csshtml.work/wp-content/uploads/cat.jpg" alt="">
</div>

親に指定しましょう。

<style>
.example14{
    /*親に指定*/justify-content: center;
    display: flex;
    border: 1px solid #333;
    background: #e1e8f7;
    padding: 5px;
}
</style>
<div class="example14">
    <img width="300" src="https://csshtml.work/wp-content/uploads/cat.jpg" alt="">
</div>

兄弟要素があるから

下の画像、真ん中より少し左にずれているのがわかるでしょうか?

この原因は画像に兄弟要素があるからです。

before、afterを使っている場合もこの現象が起こることがあります。

    
<style>
.example15{
    display: flex;
    justify-content: center;
    border: 1px solid #333;
    background: #e1e8f7;
    padding: 5px;
}
</style>
<div class="example15">
    <img width="300" src="https://csshtml.work/wp-content/uploads/cat.jpg" alt="">
    <div>  <!--コレ-->  </div>
</div>

兄弟要素を消すか縦並びにしましょう。

<style>
.example15{
    display: flex;
    justify-content: center;
    border: 1px solid #333;
    background: #e1e8f7;
    padding: 5px;
}
</style>
<div class="example15">
    <img width="300" src="https://csshtml.work/wp-content/uploads/cat.jpg" alt="">
</div>

真ん中にならない・ずれるとき

画像の前後に空白スペースがあるから

画像の前か後ろに空白全角スペースがないか確認しましょう。

     
<style>
.example16{
    text-align: center;
    border: 1px solid #333;
    background: #e1e8f7;
    padding: 5px;
}
</style>
<div class="example16">
    <img width="300" src="https://csshtml.work/wp-content/uploads/cat.jpg" alt="">     
</div>

空白全角スペースをすべて削除しましょう。

<style>
.example16{
    text-align: center;
    border: 1px solid #333;
    background: #e1e8f7;
    padding: 5px;
}
</style>
<div class="example16">
    <img width="300" src="https://csshtml.work/wp-content/uploads/cat.jpg" alt="">
</div>

画像にmarginが指定されているから

画像の右か左にmarginが指定されているとその分ずれます。

<style>
.example17 img{
    /*コレが原因*/margin-right: 100px;
}
.example17{
    text-align: center;
    border: 1px solid #333;
    background: #e1e8f7;
    padding: 5px;
}
</style>
<div class="example17">
    <img width="300" src="https://csshtml.work/wp-content/uploads/cat.jpg" alt="">
</div>

画像のmarginを削除するか左右同じ値のmarginを指定しましょう。

<style>
.example18 img{
    /*コレを削除margin-right: 100px;*/
}
.example18{
    text-align: center;
    border: 1px solid #333;
    background: #e1e8f7;
    padding: 5px;
}
</style>
<div class="example18">
    <img width="300" src="https://csshtml.work/wp-content/uploads/cat.jpg" alt="">
</div>

親にpaddingが指定されているから

親の右か左にpaddingが指定されているとその分ずれます。

<style>
.example19{
    /*コレが原因*/padding-right: 100px;
    text-align: center;
    border: 1px solid #333;
    background: #e1e8f7;
}
</style>
<div class="example19">
    <img width="300" src="https://csshtml.work/wp-content/uploads/cat.jpg" alt="">
</div>

親のpaddingを削除するか左右同じ値のpaddingを指定しましょう。

<style>
.example20{
    /*コレを削除padding-right: 100px;*/
    text-align: center;
    border: 1px solid #333;
    background: #e1e8f7;
}
</style>
<div class="example20">
    <img width="300" src="https://csshtml.work/wp-content/uploads/cat.jpg" alt="">
</div>

マンガで読める関連記事