画像を画面中央配置したい！試行錯誤するもうまくいかず...
- 質問者は、画像を画面中央に配置したいという問題に取り組んでいます。
- テーブルレイアウトを使用して左右中央には表示されるが、上下中央に表示されないという状況に困惑しています。
- Mac OSX 10.6上でDreamweaverを使用し、Safari、Firefox、Operaのブラウザで確認しています。
- ベストアンサー
画像を画面中央配置したいのですが、
画像を画面中央配置したいのですが、 ネットで検索していて、テーブルレイアウトが一番単純な作りのようなので試してみました。 左右中央にはなるのですが、上下中央に表示されません。 単純に↓が間違っているだけなのでしょうか？ <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 ーーーーーーーーーーーーーーーーー
- mr_ito1952
- お礼率78% (26/33)
- HTML
- 回答数1
- ありがとう数7
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
html ヘッダに以下のソースを追加してみて <style type="text/css"> html,body{ height:100%; margin:0; padding:0 } </style>
関連するQ&A
- テーブルで中央に指定したい
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>
- 締切済み
- HTML
- 背景画像に任意の位置でテキストを配置する
CSSで背景画像を読み込み、に任意の位置でテキストを配置するには テーブルでとspace.gifを使ってやるしかないのでしょうか？ もっとスマートな方法はないんでしょうか？ CSS .ac1 { background-image: url(images/index_main01_02.jpg); width: 629px; height: 390px; } HTML <table class="ac1"> <tr><td valign="top"><img src="images/space.gif" width="239" height="60" class="over" /></td></tr> <tr><td valign="top">これはテストですこれはテストですこれはテストです</td></tr> <tr><td valign="top"><img src="images/space.gif" width="239" height="60" class="over" /></td></tr></table>
- ベストアンサー
- CSS
- テーブルの縦が縮まらない
質問させて下さい。テーブルで表を作ったのですが、縦幅が 縮まらなく困っています。 具体的には、セル内の余白を５ピクセルにしているのですが テキストとセルの境界線の縦の距離が何倍も開いてしまいます。 ソース↓ （ボディ内はこれで全てです。テキストを変えただけです。 使用ソフトはドリームウィーバー８） --------------------------------------------------------- <table width="490" height="395" cellpadding="0" cellspacing="0" bgcolor="#666666"> <tr> <td width="490" height="393"> <table width="100%" height="100%" border="0" cellpadding="5" cellspacing="1"> <tr> <td width="121" height="35" align="center" valign="middle" bgcolor="#FFCCFF"><font color="#333333" size="2">ああああ</font></td> <td width="344" height="35" align="left" valign="middle" bgcolor="#FFFFFF"><font color="#333333" size="2">あああああああああ</font></td> </tr> <tr> <td height="22" align="center" valign="middle" bgcolor="#FFCCFF"><font color="#333333" size="2">ああああ</font></td> <td align="left" valign="middle" bgcolor="#FFFFFF"><font color="#333333" size="2">あああああああああ</font></td> </tr> </table> </td> </tr> </table> --------------------------------------------------------- 試したこと：各セルの縦幅を揃えて指定してみる。指定を全て 外してから、再度調節してみる。セル内のテキスト 表示位置を上位置に設定してみるなどです。。。 どこかすごい見落としをしているのでしょうか。よろしくお願い します。
- ベストアンサー
- HTML
- コンテナ内で文字を中央に表示したい
<div> <table border=0 cellspacing=0 cellpadding=0 style="width: 100%; height: 100%;"> <tr> <td style="text-align: center; vertical-align: middle;"> Hello! </td> </tr> </table> </div> のように、テーブルを使わずに（できればCSSなどで）divタグ内のテキストを中央に表示したいのですが、できますか？ よろしくお願いします。
- ベストアンサー
- HTML
- CSS セルごとリンクにする際、リンク文字を上下中央寄せにしたい
セルごとリンクにしたくて、以下の記述をしました。 【CSS】 ------------------------------------------------------------------ a.widelink{ vertical-align:middle; display:block; // display:inline-block; width: 100%; height:100%; // line-height:100%; color: #000000; text-decoration:none } a.widelink:hover{ vertical-align: middle; color: #000000; background-color: #9999FF; text-decoration:none } td.bgchng{ align: center; vertical-align: middle; color: #000000; margin: 0px; padding: 0px; } td.bgchng:hover{ vertical-align: middle; color: #000000; background-color: #9999FF; margin: 0px; padding: 0px; } ------------------------------------------------------------------ 【HTML】 ------------------------------------------------------------------ <TABLE border="1" bordercolor="#6666CC" cellspacing="0"> <TR> <TD width="150" height="60" valign="middle" align="center" CLASS="bgchng"> <A href="test01.html" CLASS="widelink"> テスト<BR>（その１） </A> </TD> <TD width="450" bgcolor=""> テスト（その１）の説明文<BR> 二行目 </TD> </TR> <TR> <TD width="150" height="60" valign="middle" align="center" CLASS="bgchng"> <A href="test02.html" CLASS="widelink"> テスト（その２） </A> </TD> <TD width="450" bgcolor=""> テスト（その２）の説明文<BR> 二行目<BR> 三行目 </TD> </TR> <TR> <TD width="150" height="60" valign="middle" align="center" CLASS="bgchng"> <A href="test03.html" CLASS="widelink"> テスト（その３） </A> </TD> <TD width="450" bgcolor=""> テスト（その３）の説明文<BR> 二行目 </TD> </TR> </TABLE> ------------------------------------------------------------------ この記述だとリンク文字がセルのTOPに来てしまい、中央寄せになりません。 思いつく限りの場所にvertical-alignやvalignを仕込んでみましたがダメでした。 line-heightであわせる方法もやってみましたが、<BR>を含むリンク文字の表示が二行揃ってくれず、ダメでした。 セル自体をリンクにして、さらにリンク文字を上下中央寄せにしたいのですが、やり方をご存知の方、教えてください。
- 締切済み
- HTML
- ホームページに画像を入れるには？
初心者です。どなたか教えて頂けないでしょうか？ 秀丸というフリーソフトを使ってホームページを作ろうとしています。 </table> <table style="border:1px solid red; "bgcolor="pink" width="300" height="100" cellpadding="20" cellspacing="0" align="left"> <tr align="center" valign="middle"><td> ダイエット<br></td></tr> </table> ここまではマニュアルどうり出来たのですが、ここの背景をピンクではなく画像に変えるにはどうしたら良いのでしょうか？ 分かりやすく教えて頂けないでしょうか？お願いします。
- ベストアンサー
- ホームページ作成ソフト
- どうやったらこの画像にリンクできるでしょうか？
現在ホームページを作成しているのですが、「ホーム」「プロフィール」「works」「ブログ」「名言」「ムービー」「メルマガ」のところにリンクが貼れません。 <a href="http://*************"> <td width="100" background="ホーム".png></a></td> 上記のようにやってもできません。 どこがどう間違っているのでしょうか？ 下記に書いてあるのが、前後の部分です。 <table width="700" height="600" cellpadding="0" cellspacing="0" border="0" bgcolor="#ffffff" align="center"> <tr> <td width="700" height="129" background="aa.png" align="center" valign="middle"> </td> </tr> <tr> <td width="700" height="30"> <table width="100%" height="100%" cellpadding="0" cellspacing="0" border="0"> <tr align="center" valign="middle"> <td width="100" background="ホーム".png></td> <td width="100" background="プロフィール".png></td> <td width="100" background="works".png></td> <td width="100" background="ブログ".png></td> <td width="100" background="名言".png></td> <td width="100" background="ムービー".png></td> <td width="100" background="メルマガ".png></td> </tr> </table> </td> </tr>
- ベストアンサー
- HTML
- 画像の高さと文字位置
方法として思いつかないため、良いアイディアか方法があればご教授ください。ブラウザや環境により見え方がまちまちなのも承知の上です。 現在以下のような感じに文字と画像を組んでいるのですが、 <table> <tr><td valign="middle"><img src="**.gif" width="10" height="10"></td> <td valign="middle">てきすとてきすとてきすとてきすとてきすとてきすと</td> </tr></table> てきすとが２行になった時も画像が当然ながら高さの中央に配置されるため不自然になっています。できれば２行目が存在することになっても画像の高さをテキスト１行分の中央におきたいのですが何か方法ありませんでしょうか。 スタイルシート記述でもタグでも構いません。
- ベストアンサー
- HTML
- cssでテーブルを中央配置にするには？
よろしくお願いします。 テーブルを中央配置にしたいのですが、 <center>、<div align="center">は、W3Cの非推奨タグであるため、代替方法として、<div style="text-align:center">を使用してみたのですが、うまくいきません。 <body> <div style="text-align:center"> <table> <tr> <td>あいうえお</td> </tr> </table> </div> </body> としたとき、WinXP IE6.xではテーブルが中央に配置されるのですが、WinXP Netscape 7.x では中央に配置されませんでした。どなたか解決策をご存知でしたらご教授願います。よろしくお願いします。
- ベストアンサー
- HTML
- テーブルの中央配置
内容を中央揃えにしたく、以下のようにCSSで記述してみたのですが、テーブルが揃いません。どうすればよいのでしょうか？ <head> <style type="text/css" media="screen"><!-- body { background-color: #cecece; text-align: center; } --></style> </head> <html> <body> aaa <table width="64" border="1" cellspacing="2" cellpadding="0"> <tr> <td>bbb</td> </tr> </table> </body> </html>
- ベストアンサー
- HTML
お礼
ご回答ありがとうございます！！ ソースを追加してみたら上下中央になりました！ ただ、左右が中央にならなかったので、 width:100%;を試しに追加してみたら、 画面の中央に配置されるようになりました。 本当にありがとうございました！感謝です！