- ベストアンサー
てきすとの回り込みをしたときの位置
<img align="left"> あいうえお<br> あいうえお<br> としたとき、イメージの右に 「あいうえお あいうえお」 と表示されますが、 画像の高さ方向の 画像の位置を中央にすることはできますか？
- HTML
- 回答数6
- ありがとう数4
- みんなの回答 （6）
- 専門家の回答
質問者が選んだベストアンサー
<html> <head> <title>たいとる</title> <link rel="stylesheet" href="aiueo.css" type="text/css" media="all" /> </style> </head> <body> <div id="pic"> <img src="1.gif" width:60px; height:40px;> </div> <div id="aiueo"> あいうえお<br> あいうえお<br> あいうえお<br> あいうえお<br> あいうえお<br> </div> </body> </html> head 部分を外部ファイルにすると、さらにスッキリします。 上のhtmlはこのまま保存して、↓ここから下 #pic{ width:100px; height:540px; float:left; } #aiueo{ text-align:left; width:100px; height:300px; } を「aiueo.css」として、同じフォルダ内に保存すると、 二つに分かれますが、html ファイル自体は軽くなります。
その他の回答 (5)
- Bergamot
- ベストアンサー率22% (68/299)
<head>部分で「.」 <body>部分で「class」 を使ってしまいましたが、これは何回も出てくる場合で 同じ要素を一度しか使わないなら <head>部分で「#」 <body>部分で「id」 を使います。 #pic{ } としたなら <div id="pic"> </div> こんなカンジです。
- Bergamot
- ベストアンサー率22% (68/299)
<html> <head> <style type="text/css"> <!-- .pic{ width:100px; height:540px; float:left; } .aiueo{ text-align:left; width:100px; height:300px; } --> </style> </head> <body> <div class="pic"> <img src="1.gif" width:60px; height:40px;> </div> <p class="aiueo"> あいうえお<br> あいうえお<br> あいうえお<br> あいうえお<br> あいうえお<br> あいうえお<br> </p> </body> </html> 字がズレたけど、これでどうでしょうか？
- Bergamot
- ベストアンサー率22% (68/299)
<html> <head> </head> <body> <img src="1.jpg" align="left" width="200" height="200"> <br> あいうえお<br> あいうえお<br> あいうえお<br> あいうえお<br> あいうえお<br> あいうえお<br> あいうえお<br> あいうえお<br> あいうえお<br> <br> </body> </html> すいません、すごく簡単に画像の大きさを入れました。 画像の高さより文字の高さが小さい場合、 簡単には<br>改行であわせられますが、 細かく指定するにはｃｓｓかなと思います。
お礼
ありがとうございます ＞細かく指定するにはｃｓｓかなと思います。 そのｃｓｓを教えて下さい
- info22
- ベストアンサー率55% (2225/4034)
イメージの右側真横に「あいうえお」を１行だけ持っていくことは出来ますが、２行目はイメージの下に表示されてます。 イメージの右横中央部に説明文をつける場合は見えない表の機能を使えば可能かと思います。 具体的には、イメージを「image.jpg」とした時、以下のように記述すればいいですね。 見えない１行２列の表を作り、左側のセルにイメージ、右側に「あいうえお」の２行をセルの縦方向ミドルに指定すればよいではないかと思います。 <table style="text-align: left;" border="0" cellpadding="0" cellspacing="0"> <tbody> <tr> <td style="vertical-align: top;"> <img alt="" src="image.jpg" style="" align="middle"></td> <td style="text-align: left; vertical-align: middle;"> あいうえお<br> あいうえお</td> </tr> </tbody> </table>
お礼
やはり行き着くのはそこですよね。。 なるべくスマートに決めたかったですが、仕方ないですね ありがとうございます
- sion124
- ベストアンサー率4% (2/49)
<img src="画像のアドレス" align="middle"> おそらくコレだと思います。
お礼
ありがとうございます tableを使う方向でいきます
補足
IE6.0ですが コレだと<br>で改行すると、 ２行目が、画像の下になっちゃいますね、、 引き続きお願いします
お礼
ありがとうございます