画像を右寄せにしたい

画像を回り込ませるのではなく、単純に右寄せにしたい場合どのようにしたらよいでしょう。

テキストであれば「text-align: right;」で簡単にできると思います。

しかし、画像はこれでは言うこと聞かない。

回り込ませて並べたりする時は「align: right」や「float: right」を使いますが、こういった場合にはこれらは使いません。

How to

画像をブロック要素として囲みます。

ブロック要素とは「div・p・ul・li・dl」など。

左寄せ・中央寄せ・右寄せするときはwidthとmarginを使います。

つまり、

ブロック要素にwidth(幅)を指定して画像に「margin-left: auto;」を指定

「margin-right」じゃないの?!と一瞬考えませんでしたか?

右寄せということは左側のマージンを調整する必要があるので、ここは「margin-left」になります。

実践

◆通常(左寄せ)

demo

◆右寄せ

HTML

<div class="box"><img src=".jpg" alt="demo" class="img-right"></div>

CSS

.box {width: 825px;}
.img-right {margin-left: auto;}
demo
使うシチュエーションは?

例えば、

よくある代表挨拶などで最後に手書きのサイン画像を入れたりすることありますよね。

その場合、手紙のように右側に置くのが自然に見えます。

そういった時は左側に何もないので、この手法が手っ取り早く正確にできるのではないでしょうか。

「左側に何もないのに、画像を右側に寄せたい時」が必要な時に、有効な手段だと思います。