ホームへ

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

2022年02月18日

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

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

画像を中央寄せできない原因と解決方法を、使った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>

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

htmlのブロック要素とインライン要素とは？
htmlタグは大きくブロック要素とインライン要素に分かれます。このブロック要素とインライン要素を理解していないとCSSで装飾するときにつまづきますし、html構築でも間違ってしまいます。
この記事を読む

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

CSS displayの書き方・一覧【23種説明】
CSS displayの書き方を23種デモ付きで全部説明します！
この記事を読む

画像に指定しているから

画像に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>

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

htmlタグの親子要素･兄弟要素とは
htmlにおいて親子要素･兄弟要素というワードがでてきます。親子要素・兄弟要素について解説します。
この記事を読む

CSSやhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。

↓CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓

htmlやCSSをマンガで楽しく学ぼう【180ページ単行本1冊相当量】
htmlから収益化までホームページ作成の基本をひととおり、マンガでクスっと笑いながら学べます。9年間ホームページを作ってきた作者の実績に基づき作られた確かな内容です。
この記事を読む

↑「副業してもう少し稼ぎたい！」というかたのために副業の方法も解説しています。

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>
CSS display:flexで縦並びにする方法4選
「パスコン版で横並べにした要素をスマホ版で縦並びにしたい」「上下中央寄せのためにdisplay:flexを使ったが子要素を縦並びにしたい」というあなたへCSS display:flexで縦並びする方法を4種類解説します。
この記事を読む

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

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

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

　　　　　 
<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>

「この記事の内容がよくわからなかった…」「なんかうまくいかなかった…」というかたは下記記事↓でhtmlとCSSの基本を学びましょう。
わからないまま突き進むより基本を学ぶのが結局近道です。

htmlやCSSをマンガで楽しく学ぼう【180ページ単行本1冊相当量】
htmlから収益化までホームページ作成の基本をひととおり、マンガでクスっと笑いながら学べます。9年間ホームページを作ってきた作者の実績に基づき作られた確かな内容です。
この記事を読む
CSSやhtmlをマンガで学ぶ