ホームへ

【CSS】画像(img)を親要素からはみ出させつつ中央寄せにする方法

2022年03月05日

画像を中央寄せする方法といえば「text-align:ceter」や「margin:auto」ですが、これは画像が親要素より小さい場合です。

画像が親要素からはみだすくらい大きいとこれらの方法では中央寄せできません。

画像を親要素からはみ出させつつ中央寄せにする方法を紹介します。

【方法1】justify-content:center

親要素にdisplay: flexとjustify-content: centerを指定すると画像がはみ出しても左右中央寄せできます。

<style>
.example{
    /*コレ*/display: flex;
    /*コレ*/justify-content: center;
    border: 2px solid #999;
    width: 30%;
    margin: auto;
}
.example img{
    max-width: none;
    width: 500px;
    display: block;
    opacity: 0.8;
}
</style>
<div class="example"><img src="https://csshtml.work/wp-content/uploads/cat.jpg" alt=""></div>

後述する方法と比べてwidthを直したとき修正する箇所がないので楽です。

【上下中央寄せ】align-items: center

さらにalign-items: centerを指定すると縦の中央寄せもできます。

<style>
.example1-2{
    /*コレ*/display: flex;
    /*コレ*/align-items: center;
    justify-content: center;
    border: 2px solid #999;
    width: 30%;
    height: 200px;
    margin: 50px auto;
}
.example1-2 img{
    max-width: none;
    width: 500px;
    display: block;
    opacity: 0.8;
}
</style>
<div class="example1-2"><img src="https://csshtml.work/wp-content/uploads/cat.jpg" alt=""></div>

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

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

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

【方法2】margin-left:calc(50% - ○/2)

左右中央寄せするには、imgの「margin-left」に「calc(50% - ○/2)」を指定します。

○にはimgのwidthと同じ値単位を入れます。

<style>
.example2{
    border: 2px solid #999;
    width: 30%;
    margin: auto;
}
.example2 img{
    max-width: none;
    /*この値*/width: 500px;
    /*コレ*/margin-left: calc(50% - 500px/2);
    display: block;
    opacity: 0.8;
}
</style>
<div class="example2"><img src="https://csshtml.work/wp-content/uploads/cat.jpg" alt=""></div>

【上下中央寄せ】margin-top: calc(△/2 - □/2)

上下中央寄せするには、imgの「margin-top」に「calc(△/2 - □/2)」を指定します。

△には親要素のheightと同じ値単位を入れます。

□にはimgのheightと同じ値単位を入れます。imgのheightがautoの場合はwidthと画像の縦横比から計算しましょう。

<style>
.example2-2{
    border: 2px solid #999;
    width: 30%;
    /*この値*/height: 200px;
    margin: 50px auto;
}
.example2-2 img{
    /*コレ*/margin-top: calc(200px/2 - 281px/2);
    max-width: none;
    width: 500px;
    margin-left: calc(50% - 500px/2);
    display: block;
    opacity: 0.8;
}
</style>
<div class="example2-2"><img src="https://csshtml.work/wp-content/uploads/cat.jpg" alt=""></div>

【まとめ】画像を親要素からはみ出させつつ中央寄せにする方法

親要素にdisplay: flexを指定したうえで下記を指定する

【左右中央寄せ】justify-content: center

【上下中央寄せ】align-items: center

marginで調整する方法は計算がメンドウであるため非推奨。

以上、画像を親要素からはみ出させつつ中央寄せにする方法でした。

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

CSSやhtmlをマンガで学ぶ