• ベストアンサー

画像の上下中央固定について

今、ホームページをメモ帳で作っています。 大きな画像１枚だけを、１つのページにドンと置いているんですが その画像を、どんなに画面の大きさが変わっても 常に上下左右の中央にもってきたいんです。 左右は、<center>ではさんだり、テーブルを使ったりして できたんですが、どうしても上下だけができません。 どこかのホームページで、テーブルを使った場合 ALIGN="*"と同じように　VALIGN="*"でcenterと指定すればできる と書いてあったのですが、私はできませんでした。 どうすれば、上下の中央に持ってこれるのかご存知の方、教えてください。 お願いします。　

  • HTML
  • 回答数2
  • ありがとう数3

質問者が選んだベストアンサー

  • ベストアンサー
  • shy00
  • ベストアンサー率34% (2081/5977)
回答No.1

VALIGNの時は「middle」では？

aitatata
質問者

お礼

middleにしたら、できました！ ありがとうございます！

その他の回答 (1)

回答No.2

これでどうですか？ <table width=100% height=100% border=0> <tr><td align=center valign=middle> <img src="***.jpg"> </td></tr> </table>

aitatata
質問者

お礼

ありがとうございました。 できました！！

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. HTML

関連するQ&A

  • CSSで画像・テーブルをウインドウの中央（上下・左右共）に表示したい！

    前回は文字を一番下の中央に表示させたい質問をして、 回答を頂き出来るようになったのですが、今度は画像や テーブルをCSSを使ってウインドウの中央（上下・左右共） に表示させる方法が分らず困っています。 ご存知の方がおられましたら回答を宜しくお願いします。 このようにやってみましたが、画像やテーブルの縦の長さ に関係なく50％位置に配置されてしまい、上下に中央では なくなってしまいました。 position: absolute; top: 50%; width: 100%; text-align: center; いじょう宜しくお願いします。

    • ベストアンサー
    • HTML
  • 画像を画面中央配置したいのですが、

    画像を画面中央配置したいのですが、 ネットで検索していて、テーブルレイアウトが一番単純な作りのようなので試してみました。 左右中央にはなるのですが、上下中央に表示されません。 単純に↓が間違っているだけなのでしょうか？ <body> <table border=0 width=100% height=100%> <tr><td align=center valign=middle> <img src="images/intro.jpg" /> </td></tr> </table> </body> ご存知の方いらっしゃいましたら、よろしくお願いします。 ーーーーーーーーーーーーーーーーー 作業環境 ・Mac OSX 10.6 仕様アプリ ・Dreamweaver 確認ブラウザ ・Safari 5.0 ・Firefox 3.6.6 ・Opera 9.20 ーーーーーーーーーーーーーーーーー

    • ベストアンサー
    • HTML
  • 上下の中央に揃えるには

    ホームページを作る時、イメージを左右の中央に揃えるには<CENTER>～</CENTER>を用いますが、上下の中央にイメージを揃える方法ってありますか？ IE6.0を使っています。

    • ベストアンサー
    • HTML
  • 図形　上下も中央に表示するには

    エクセルの図形で左右の位置を中央に表示できますが 上下も中央に表示するにはどうすればいいですか？ 画像は左右の位置を中央に表示しようとしている画面です。

  • CSSで画像を中央に持っていく方法。

    簡単な問題です。 画像を liの枠内の上下左右中央に配置するには、どうすればいいでしょうか？ 画像のサイズがまちまちなので、 paddingなどで数値を指定するのは、NGです。 vertical-align:middleはだめでした。 text-align:centerで左右の中央に持って行く所まで、できました。 HTML ==================== <ul class="book_slide"> <li><img src="image/bookmihon.jpg" width="51" height="75" alt="*" /></li> <li><img src="image/bookmihon.jpg" width="51" height="75" alt="*" /></li> </ul> ====================== css ======================= ul.book_slide li{ float:left; height:114px; width:80px; border:1px solid #000; text-align:center; } =======================

    • ベストアンサー
    • CSS
  • フレームを使った縦横中央へのレイアウト

    縦横ともに画面中央にレイアウトするには、どのような方法が良いのでしょうか？ http://www.salon-de.net/main.html このサイトではテーブルを縦横１００％にしてセルで中央にレイアウトされるように指定しているようですが、テーブル縦１００％を認識しないブラウザでは中央レイアウトになりません。 http://www.parkhyatttokyo.com/ このサイトでは、なぜかフレームを縦２段で１００％と相対に指定し、１００％の方に内容の入ったＨＴＭＬファイルを表示させています。 画面中央にレイアウトされたページでは、このようにフレームを縦２段にして１００％と相対に指定したものが多く見受けられますが、これにはどのような意味があるのでしょうか？ さらに、 http://www.toraya-cafe.co.jp/ では同様のフレームが２重になっています。 また、なぜか「TD」タグ内では「vAlign=center」「align=middle」のようにダブルクォーテーションを付けない書き方が多数派となっています。 この理由はなぜでしょうか？ 詳しい方お教え願います。

  • [CSS]上下フレームの背景を中央寄せでずれさせない方法

    ホームページ作成中です。 上下2つにフレーム分けしています。 ページはテーブルで構成された中央800pix固定にしようとしています。 さて、上下のフレームにまたがるような固定の1枚背景画像を中央にセットしたいのですが、問題が発生しています。 上フレームについては問題なくできています。ただ、下フレームが、本文が長くなった際もちろんスクロールバーが出るのですが、スクロールバー分左にずれてしまいます。 下をスクロールさせてもちゃんと背景画像を出したいのでテーブルの背景ではちゃんとできないですよね。 どうにかして上下フレームの背景画像で中央寄せした場合、ずれないようにする方法はないでしょうか?

    • 締切済み
    • CSS
  • テーブルで中央に指定したい

    1行1列の横100％ 縦100％に指定したテーブルを1つ そのテーブルの中に1行1列の横100px 縦100pxが1つ このようにした場合、中に入れたテーブルはどの解像度でも画面の中心にくるはずです。 しかし、IE6で確認すると横の中央にはくるのですが縦の中央にはきません。 しかしネスケ4.7ではイメージ通りになっています。 なぜでしょうか？ [ソース参考] <table width="100%" height="100%" border="1" cellpadding="0" cellspacing="0"> <tr> <td width="100%" height="100%" align="center" valign="middle"> <table width="100" height="100" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#0033CC"> <tr> <td width="100" height="100"><center> <font color="#FFFFFF"><strong>中央</strong></font> </center></td> </tr> </table> </td> </tr> </table>

  • 画像の中央横にテキストを表示したい

    Dreamweaverでホームページを作っています。 30×30ピクセルほどの小さな画像のとなりにテキストを表示させたいのですが、デフォルトだと画像の下側に合わさってしまいます。 そこで、imgに対するalignオプションで"middle"を指定しました。 ところが、それだと上方に位置されてしまいました。 一体どうすれば、画像とテキストの中央が合ってくれるようになるのでしょうか？ ご存知の方、どうかお教え願えますでしょうか？

    • ベストアンサー
    • HTML
  • ホームページの表の中に背景画像を固定したいのですが、どうしてもできません・・・

    ホームページビルダーで作っています。 いろんなサイトを参考にして、ソースをコピー＆ペーストしながら 作ったので、私自身は詳しくはありません。 表が 上下に２分割されていて、 ●上の表の部分には目次が入ります。 【home】　【news】 【profile】 【gallery】【diary】 【shop】 【mail】【link】 ●下の表にはそれぞれのページが表示されるようになっていて スクロールできるようになっています。 どうしても下の表の部分に背景画像を固定できません。 かわいい女の子のイラスト画像を左・中央に固定させたくて スクロールしても動かないようにしたいのですが、出来ません。 基本的な構造に問題があるのでしょうか？ ホームページのソースはこんな感じです。 詳しくは添付画像をご覧ください。 よろしくお願い致します。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html><head> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version 8.0.0.0 for Windows"> <META http-equiv="Content-Style-Type" content="text/css"> <title>サンプルページ</title> <LINK REL="SHORTCUT ICON" HREF="favicon.ico"> <style type="text/css"><!-- body {background-color: #ffffff; } .headBox { width: 800px; } .recordBox { width:783px; height: 500px; overflow-y: scroll; scrollbar-arrow-color:#ffffff; scrollbar-face-color:#ffd700; scrollbar-3dlight-color:#788d47; scrollbar-shadow-color:#ffffff; scrollbar-track-color:#ffffff scrollbar-darkshadow-color:#000000; } .tblHead { width: 800px; background-color: #ffc; } .tblRecord { width783px; line-height:1.3; } TABLE{ margin-bottom : 0px; } --> IMG{ clear : left; } --> </style> </head> <BODY bgcolor="#400040"> <P><BR> </P> <center> <div class="headBox"> <TABLE class="tblHead" width="800" cellspacing="0" height="50"> <tr> <TH height="50" bgcolor="#000000" width="90" valign="middle" align="center"></TH> <TH height="50" bgcolor="#000000" width="90" valign="middle" align="center"></TH> <TH height="50" bgcolor="#000000" width="90" valign="middle" align="center"></TH> <TH height="50" bgcolor="#000000" width="90" valign="middle" align="center"></TH> <TH height="50" bgcolor="#000000" width="90" valign="middle" align="center"></TH> <TH height="50" bgcolor="#000000" width="90" valign="middle" align="center"></TH> <TH height="50" bgcolor="#000000" width="90" valign="middle" align="center"></TH> <TH height="50" bgcolor="#000000" width="90" valign="middle" align="center"></TH> </tr> </TABLE> </div> <div class="recordBox"> <TABLE class="tblRecord" width="783" cellspacing="0" bordercolordark="#FFFFFF" bordercolorlight="#000000" rules="none" bgcolor="#ffffff"> <tr> <TD valign="top" align="left" colspan="4" width="90" height="501"><FONT size="-1"></FONT><FONT size="-1"><BR> </FONT></TD> </tr> </TABLE> </div> </center> </BODY> </html>

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する