【CSS】画像だけを中央寄せしてテキストは左寄せのままにする方法

テキストの前後にある画像を目立たせるために中央寄せしたいですよね？

そう思って中央寄せしたらテキストごと中央寄せになってしまった!?

画像だけを中央寄せしてテキストは左寄せのままにする方法を解説します。

【症状】テキストも中央に寄ってしまう

テキストの前後に画像がある状態で中央寄せをしようとすると…

<div>
    テキストテキストテキストテキストテキストテキスト<br>
    <img width="200" src="cat.jpg" alt=""><br>
    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
</div>

↓

下記のようにテキストごと中央寄せになってしまうことがあります。

<div style="text-align: center;">
    テキストテキストテキストテキストテキストテキスト<br>
    <img width="200" src="cat.jpg" alt=""><br>
    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
</div>

text-align: centerは子要素のインライン要素をすべて中央寄せするCSSです。

text-align: centerを指定しているdivの中にテキストも画像もあるためすべて中央寄せになってしまっています。

テキストは左寄せのまま、画像だけ中央寄せする方法を紹介します。

【方法1】pタグでテキスト、画像をそれぞれ囲う

pタグでテキスト、画像をそれぞれ囲ったうえで画像を囲ったpタグだけに「text-align: center」を指定しましょう。

<p>テキストテキストテキストテキストテキストテキスト</p>
<p style="text-align: center;"><img width="200" src="cat.jpg" alt=""></p>
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>

pタグで囲うことでtext-align: centerが効く範囲を画像に限定する形です。

brがなくてもpタグで改行されます。

CMSによってはEnterを押しただけではbrによる改行になるものもあります。

その場合は「Ctrl+Enter」or「Alt+Enter」or「Shift+Enter」で改行するとpタグで囲われます。

また、メモ帳などの文章を貼り付けた場合もbrによる改行になる場合があります。

【方法2】imgにCSSを指定する

brがあろうがimgだけ中央寄せするにはimgに「display: block」と「margin: auto」を指定します。

<style>
.example img{
    display: block;
    margin: auto;
}
</style>
<div class="example">
    テキストテキストテキストテキストテキストテキスト<br>
    <img width="200" src="cat.jpg" alt=""><br>
    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
</div>

「text-align: center」は子要素のインライン要素を中央寄せする方法でしたが、「margin: auto」は自身を中央寄せする方法です。

ただし、margin: autoはブロック要素にしか使えません。

よってimgに「display: block」を指定してブロック要素にする必要があります。

brがあっても大丈夫ですが、brは不要です。brを消せば画像の下の隙間もなくなります。（上記の例ではわざとbrを残しています。）

【まとめ】画像だけを中央寄せにする方法

【方法1】pタグでテキスト、画像をそれぞれ囲ったうえで画像を囲ったpタグだけに「text-align: center」を指定する。

【方法2】imgに「display: block」と「margin: auto」を指定する。

以上、画像だけを中央寄せしてテキストは左寄せのままにする方法でした。