【CSS/html】画像を縮小させても中央寄せさせる方法

「画像が大きいときは中央寄せになっているのに、縮小するとちょっと左にずれるんだけど!?縮小しても真ん中に寄せたい！」

画像を縮小させても中央寄せさせる方法を解説します。

【症状】画像を縮小すると左に寄る

↓下記は中央寄せしている画像です。

↑上記の画像を縮小すると、↓下記のように左に寄ってしましました。

【原因】中央寄せになっているのは外の枠だから

実はこの画像の外側にはdivの枠があり、それが中央寄せになっていました。

↓下記はそのdivに枠線をつけたバージョンです。

↑上記は枠が中央に寄っており、その枠に画像がぴったりはまっています。

↓下記は枠は中央に寄っているものの、縮小した画像はその枠内の左端に寄っています。

さて原因がわかったところで本題の「縮小しても画像を中央寄せにする方法」を解説します。

【改善1】枠にtext-align:center

画像の外枠であるdivに「text-align:center」を指定すると中にある画像やテキストが中央に寄ります。

<style>
.example3{
    /*コレ*/text-align: center;
    width: 300px;
    margin: auto;
    border: 2px solid #000;
}
</style>
<div class="example3">
    <img width="100" src="https://csshtml.work/wp-content/uploads/cat.jpg" alt="">
</div>

【改善2】画像にmargin:autoとdisplay:block

画像自体にmargin:autoを指定しましょう。

margin:autoを指定すると要素を中央寄せできます。ただし、margin:autoはブロック要素にしか効きません。

画像は通常インライン要素ですので、ブロック要素にするために「display:block」も指定しましょう。

<style>
.example4 img{
    /*コレ*/margin: auto;
    /*コレ*/display: block;
}
.example4{
    width: 300px;
    margin: auto;
    border: 2px solid #000;
}
</style>
<div class="example4">
    <img width="100" src="https://csshtml.work/wp-content/uploads/cat.jpg" alt="">
</div>

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

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

【改善3】枠も縮小させる

枠と画像がピッタリのときは中央寄せになっていたのですから、画像だけではなく枠も縮小させればいいわけです。

枠のwidthを画像と同じ値にしましょう。

<style>
.example5{
    /*コレ*/width: 100px;
    margin: auto;
    border: 2px solid #000;
}
</style>
<div class="example5">
    <img width="100" src="https://csshtml.work/wp-content/uploads/cat.jpg" alt="">
</div>

【まとめ】画像を縮小させても中央寄せさせる方法

• 枠にtext-align:center
• 画像にmargin:autoとdisplay:block
• 枠のwidthを画像と同じ値にする

以上、画像を縮小させても中央寄せさせる方法でした。