• 締切済み

HTMLで画像を右寄せにするには

HTMLで画像を右寄せにしたくて、 https://csshtml.work/img-text-align/ このサイトを見ながらコードをまねしたのですが、なぜか右寄せにできませんでした。 どうしたら右寄せにすることができますか?至急お願いします!

みんなの回答

  • retorofan
  • ベストアンサー率33% (328/977)
回答No.2

<style> .sample{/* 画像の右寄せ */ text-align: right; } </style> <div class="sample"> <image src="./mypics.jpg" width="200" height="200" alt="image"> </div>

全文を見る
すると、全ての回答が全文表示されます。
回答No.1

<!DOCTYPE html> <html> <head> <title>画像の右寄せ</title> <style> .right-align { float: right; } </style> </head> <body> <div class="right-align"> <img src="/////image.jpg" alt="画像の説明"> </div> </body> </html> これで右寄せになりませんか? ※画像ファイルへのパスは正確に書き換えてください。

全文を見る
すると、全ての回答が全文表示されます。

関連するQ&A

  • <p>要素をインライン要素にしての右寄せ

    <p>要素をインライン要素にしての右寄せ 【以下、HTML】 .text{ font-size:12px; font-weight:normal; margin:0px; padding:25px 0px 0px 35px; } <div class="text"> <img src="-" style="vertical-align:-2px;margin:0px 10px 10px 15px;"><a href="-">リンク</a><p style="text-align: right;display:inline;">あいうえお</p><br></div> 上記の「あいうえお」の部分を画像やリンクと並列したく、インライン要素で右寄せしたいんですがどうしたらいいでしょうか? よろしくお願いします。

    • ベストアンサー
    • HTML
  • 文章の後半を右寄せしたい

    こんにちは。タイトルどおりなのですが、一つの文章内の後半部分を右寄せしたいのですが、どうしたら出来ますか?(改行せずに) <p>あいうえお <span>かきくけこ</span></p> span { text-align: right; } とやってみましたが、右寄せできませんでした。 やり方が間違っていますか?どうしたら右寄せできるでしょうか? かきくけこ の部分を右寄せしたいです。教えて下さい。よろしくお願いします。

    • ベストアンサー
    • HTML
  • テキストボックスの右寄せ

    INPUT TYPE='text' に設定する文字を右寄せにしたいのですが…。 <input type='text' size='3' name='GAKUNO' value='<%=rs"GAKO_NO")%>'> ここに align='right' を指定しても、右寄せにならないのですがどうしたらよいでしょうか?

  • 文字の右寄せの書き方

    次のようにすると「2009年7月5日」の文字が右寄せされると思うのですが、右寄せされません。どこが間違っているのでしょうか。 <head> <style type="text/css"> <!-- p.2 {line-align:right; } --> </style> </head> <body> <p class="2">2009年7月5日</p> </body>

    • ベストアンサー
    • HTML
  • 【HTML5、CSS2.1】imgのalign

    HTML5、CSS2.1でホームページを作成しています。 http://www.tagindex.com/html_tag/img/img_align.html このサイトを参考に画像の右中央に文字を配置したいのですが HTML5ではalign属性が認められていません。 どのように対処すればよいのか教えていただけましたら幸いです。

    • ベストアンサー
    • HTML
  • 右寄せ時の背景画像

    cssでテキストを右寄せするだけなら問題ないのですが背景画像をつける場合下記の他にどのような方法がありますか? <p class="hoge">ここに右寄せのテキストが入ります。</p> .hoge { margin-top: 5px; font-size: 80%; color: #888; text-align: right; background: url(../img/common/hoge.png) no-repeat 420px 1px; } 420pxを0とすると当然ながら左端を基準に画像が表示されテキストは右を基準に表示されてしまいます。 ここで妥当なpxを指定する事によりうまく調整は可能なのですがサイト内でフォントサイズを変更 できるようにしておりフォントサイズMAXの幅に合わせてcssを定義するとMINの際に大きく幅が空いてしまい 不格好になってしまいます。 解決方法としてどのような方法がありますでしょうか?

    • ベストアンサー
    • HTML
  • HTMLとCSSを教えてください。

    画像を中央揃えしたいのですが、 <img src="xxx.jpg"> img{ text-align:center; } とやったのですが、中央揃えできないのですがなぜでしょうか? もうひとつ質問させてください。図書館の参考書に書かれている内容で、「今はtext-align:center;よりposition:absolute;top:105px;left:50px;を使う事が多くなっています」と書いてありました。ほかにもサイトのソースをみると、absoluteを使用しているサイトを良く見かけますが、positionを使ってデザインすると画面サイズとか、見るブラウザによってデザインが崩れてしまわないでしょうか?そうなるとやはりtext-align:center;を使うのがいいのではないでしょうか? どれも初歩的ですみませんが、よろしくおねがいします。

    • ベストアンサー
    • HTML
  • 右寄せ表示方法

    <INPUT TYPE="text" NAME="kakaku" SIZE="6" > とした場合入力領域の中は普通もじは左づめで表示されますが、これを右寄せで表示するにはどうしたらいいのでしょう?align=rightとか使ってみましたがだめでした。

    • ベストアンサー
    • HTML
  • HTMLの画像と文章の自動的に行われる配置について

    HTMLコードで↓のように画像を左側にして、その右側に画像を囲うようにして文章を表示させたいです。画像よりも下になったら自動的に文章が左詰めになるようにしたいです。 ■■■■■ ~~~文章~~~ ■■■■■ ~~~文章~~~ ■■■■■ ~~~文章~~~ ~~~~~~~文章~~~~~ そして自分が作ったHTMLコードは、 <IMG SRC="a.jpg" WIDTH=580 HEIGHT=470 align="middle""left" hspace="20" vspace="20" > ~~~文章~~~<br> ~~~文章~~~<br> ~~~文章~~~<br> <BR CLEAR=all> です。 これだと↓1行ぐらい画像の右隣に少し出て、残りは下側に表示されてしまいます。 ■■■■■ ■■■■■ ~~~文章~~~ ■■■■■ ~~~文章~~~ ~~~文章~~~ ~~~文章~~~ ~~~文章~~~ 何が原因でしょうか。

    • ベストアンサー
    • HTML
  • float:left; したものを右寄せ

    <div style="text-align:right;"> <ul> <li style="float:left;">リスト</li> <li style="float:left;">リスト</li> <li style="float:left;">リスト</li> </ul> </div> リスト要素を横に並べるようにfloat:left;をいれたものを、 画面右寄せにするにはどうすればいいでしょうか。 上のソースではtext-align:right;が効かず左よせになってしまいます。。 よろしくお願いいたします。

    • ベストアンサー
    • HTML