- ベストアンサー
画像の表示位置について
質問があります。 小さな画像(162×82)の画像をブラウザのど真ん中に 表示させたいのですがどうしてもうまくいきません。 <HTML> <BODY> <CENTER><IMG SRC="top.bmp"></CENTER> </BODY> </HTML> ↑もちろんこれだと画像のセンタリングしかできません。 縦位置、横位置、ともに真ん中（ブラウザの中央）に おきたいです。
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
スタイルシートを使えば、出来ると思いますが、 一つの案として、テーブルを利用してみてはいかがでしょうか？ <table width="100%" height="100%"> <tr> <td align="center" valign="middle"> <img src="top.bmp" width="162" height="82"> </td> </tr> </table> 画面いっぱいのテーブルを作り、その真ん中に画像を置いています。
その他の回答 (3)
スタイルシートを使用すれば、お望みの表示に近いことは可能かと思います。 <div style="position: absolute; top: 50%; width: 100%; text-align: center;"><img src="wp0205.jpg"></div> このような感じにすると、画面の有効領域の縦幅に対して、上から50%の位置に画像 を配置することが可能です。 中心位置は、ボックス幅を100%にとって、センタリン グで寄せています。 なお、厳密には、上記のソースでは画像の上端の座標が画面の中心になるような形に なっています。 そのため、実際にはイメージ要素の縦幅の分だけ微妙に下側に寄っ ているので、こちらでは完全な中心位置を取ることはできていません。 そのあたり の細かい位置まで含めて調整する必要がある場合は、画像の表示サイズとの兼ね合い でtopのプロパティの値を微調整してみてください(その場合でも、ウィンドウサイズ が変更された場合は微妙に中心位置を外れることになりますが…)。 参考になれば幸いです。
- nitto3
- ベストアンサー率21% (2656/12205)
<HTML> <BODY> <CENTER><BR><BR> <IMG SRC="top.bmp"></CENTER> </BODY> </HTML> フォントサイズを大きくしておけば <BR><BR>の数は少なくて済みます。 <HTML> <BODY> <CENTER><PRE> <IMG SRC="top.bmp"></PRE></CENTER> </BODY> </HTML> 同じように <PRE> の後のスペースは少なくて済みます。 タブルタグはいい方法です、なぜ教えてもらったことを素直に聞かないのですか。
お礼
・・・
STYLE type=text/css> <!-- BODY {background:white url(画像ファイル) 50% 50% no-repeat fixed} --> </STYLE> こんな感じではどうでしょうか。
お礼
返信ありがとうございます。 記述し忘れてしまったのですが、 バックグランドは別の画像を設定して、 画像ファイルをブラウザの中央に配置したいと 考えています。 また、テーブルを使わずに表示させてたいと 考えています。 ごめいわくをおかけしますが宜しくお願い致します。
お礼
返信ありがとうございます。 できればテーブルを使用しずに したいのですが。 すみません、せっかくお答えしたのに 記述しずにご面倒をかけてしまって・・・