はじめに

パソコン用のサイトをコーディングする際、画像を左寄せ（あるいは右寄せ）させたい時は、float:leftやfloat:rightを使う事が多いと思います。

これをレスポンシブ対応させたい時、画像のサイズによってはテキストが微妙に右に残って見た目が悪いので、スマホ表示ではfloat:noneとして画像の回り込みをさせています。

そうすると左に寄った画像だけが残り、右にスペースができてバランスが悪いので、スマホ表示の時は画像を中央寄せにする方法はないか、と色々考えた結果、いくつか方法が思い浮かびました。

仕上がりイメージ

今回のコーディングはレスポンシブで表現しているので、パソコンでご覧の方はブラウザの機能（デベロッパーツール等）を使用するか、ウインドウの横幅を狭くして確認してみて下さい。

祇園精舎の鐘の声、諸行無常の響きあり。沙羅双樹の花の色、盛者必衰の理をあらはす。

目次

今回4パターンご紹介していますが、個人的には「4」が好きです。

float:leftとtext-align:centerを使う方法　1

まずはfloat:leftとtext-align:centerを使った方法です。

私はいまだにたまにやってしまうのですが、imgに中央寄せtext-align:center;を設定してみるものの、中央寄せがされていないため焦ります。

中央寄せを反映させたい場合、親要素にtext-align:center;を設定する必要があります。今回のコーディングの概要は以下のとおりです。

HTML

<div class="box">
　<img src="img/top/test.jpg" alt="">
　<p>祇園精舎の鐘の声、諸行無常の響きあり。沙羅双樹の花の色、盛者必衰の理をあらはす。</p>
</div>

CSS（PC表示用）

.box img {
　float:left;
　margin-right: 20px;
}

CSS（レスポンシブ用）

.box {
　text-align:center;
}
.box img {
　float:none;
　margin-right: 0;
}
.box p {
　text-align:left;
}

できあがったもの

祇園精舎の鐘の声、諸行無常の響きあり。沙羅双樹の花の色、盛者必衰の理をあらはす。

この方法のデメリットは、divでbox内全体を中央寄せにしているため、pをわざわざ左寄せで指定する必要がある点です。

上記の例だと内容がシンプルなので問題無いですが、もっと複雑な場合で将来的にこのdiv内にコンテンツを追加したい場合に問題が発生します。

追加するタグに合わせてCSSに左寄せで指定しないと、デフォルトで中央寄せにされてしまい、更新性が悪いです。

float:leftとtext-align:centerを使う方法　2

上記は全体をdivで囲みましたが、今回は画像のみdivで囲んだ方法です。
今回のコーディングの概要は以下のとおりです。

HTML

<div class="box">
　<img src="img/top/test.jpg" alt="">
</div>
<p>祇園精舎の鐘の声、諸行無常の響きあり。沙羅双樹の花の色、盛者必衰の理をあらはす。</p>

CSS（PC表示用）

.box {
　float: left;
　text-align: center;
　margin-right: 20px;
}

CSS（レスポンシブ用）

.box {
　float:none;
　margin-right: 0;
}

できあがったもの

祇園精舎の鐘の声、諸行無常の響きあり。沙羅双樹の花の色、盛者必衰の理をあらはす。

pをtext-align:leftで設定しなくて良い分、最初の方法より更新しやすい作りになっていると思います。

さらにシンプルにしたい場合は次の方法があります。

float:leftとdiesplay:blockを使う方法　1

htmlでdivを使わない方法になります。

left: 50%;で画像を右へ50%移動させる方法になりますが、このままだと画像の横幅ぶん右に寄るので、transform: translateX(-50%);で画像自身の幅の半分だけ左に戻します。

HTML

<img src="img/top/test.jpg" alt="">
<p>祇園精舎の鐘の声、諸行無常の響きあり。沙羅双樹の花の色、盛者必衰の理をあらはす。</p>

CSS（PC表示用）

img {
　float:left;
　margin-right: 20px;
}

CSS（レスポンシブ用）

img {
　float:none;
　position: relative;
　left: 50%;
　transform: translateX(-50%);
}

できあがったもの

祇園精舎の鐘の声、諸行無常の響きあり。沙羅双樹の花の色、盛者必衰の理をあらはす。

divを使わない分、若干ですがhtmlの記述が減ります。

transformを使った画像の移動は、レイアウトが崩れてしまう時がありそうなので、diesplay:blockを使う場合は、個人的には次の方法を使うようにしています。

float:leftとdiesplay:blockを使う方法　2

上記同様にdisplay:blockを使った方法です。

htmlとベースのCSSはソースは上の物と同じです。レスポンシブ時に要素を中央寄せにする方法が異なり、display: block;に設定した上で、左右のmarginをautoに設定することで、画像を中央に配置させます。

HTML

<img src="img/top/test.jpg" alt="">
<p>祇園精舎の鐘の声、諸行無常の響きあり。沙羅双樹の花の色、盛者必衰の理をあらはす。</p>

CSS（PC表示用）

img {
　float:left;
　margin-right: 20px;
}

CSS（レスポンシブ用）

img {
　float:none;
　display: block;
　margin-left:auto;
　margin-right: auto;
}

できあがったもの

祇園精舎の鐘の声、諸行無常の響きあり。沙羅双樹の花の色、盛者必衰の理をあらはす。

flexboxを使う方法　1

1～4まではfloatを使った方法ですが、今回の方法はflexboxを使用します。

HTML

<div class="box">
　<img src="img/top/test.jpg" alt="">
　<p>祇園精舎の鐘の声、諸行無常の響きあり。沙羅双樹の花の色、盛者必衰の理をあらはす。</p>
</div>

CSS（PC表示用）

.box {
　display: flex;
　align-items: flex-start;
　justify-content: center;
}

CSS（レスポンシブ用）

.box {
　flex-wrap: wrap;
}

できあがったもの

祇園精舎の鐘の声、諸行無常の響きあり。沙羅双樹の花の色、盛者必衰の理をあらはす。

flex-wrap: wrap;を使用するため、画像サイズやテキストの長さが短い（横幅が小さい）と、レスポンシブ時でも折り返されずに横並びに表示されます。

個人的に気になるのは、PC表示時テキストは左寄せなのにjustify-content: center;で中央寄せにしている点で、それを解消したい場合は次の方法を使います。

flexboxを使う方法　2

上記と似た方法ですが、レスポンシブ時にflex-direction: column;を使う事で画像とテキストを縦並びにし、またimgを中央寄せにする事でPC表示時のflexboxをjustify-content: flex-start;として設定する方法です。

HTML

<div class="box">
　<img src="img/top/test.jpg" alt="">
　<p>祇園精舎の鐘の声、諸行無常の響きあり。沙羅双樹の花の色、盛者必衰の理をあらはす。</p>
</div>

CSS（PC表示用）

.box {
　display: flex;
　align-items: flex-start;
　justify-content: flex-start;
}

CSS（レスポンシブ用）

.box {
　flex-direction: column;
}
img {
　display: block;
　margin-left: auto;
　margin-right: auto;
}

できあがったもの

祇園精舎の鐘の声、諸行無常の響きあり。沙羅双樹の花の色、盛者必衰の理をあらはす。

flexboxを使う方法　3

PC表示ではflexboxを使って横並びにしつつ、レスポンシブ表示ではdisplay:block;で横並びを解除する方法です。

HTML

<div class="box">
　<img src="img/top/test.jpg" alt="">
　<p>祇園精舎の鐘の声、諸行無常の響きあり。沙羅双樹の花の色、盛者必衰の理をあらはす。</p>
</div>

CSS（PC表示用）

.box {
　display: flex;
　align-items: flex-start;
　justify-content: flex-start;
}

CSS（レスポンシブ用）

.box {
　display: block;
}
img {
　display: block;
　margin-left: auto;
　margin-right: auto;
}

できあがったもの

祇園精舎の鐘の声、諸行無常の響きあり。沙羅双樹の花の色、盛者必衰の理をあらはす。

flexboxを使うパターンでは、画像とテキストの間に余白ができないので、余白を作ろうとすれば、PC用のCSSにimg { display:block; margin-right:20px; }のような記述が必要になります。

また、flexboxを使用するため、ベンダープレフィックスが必要になります（上記ソースでは省略しています）。