ベストアンサー

どうしても文字が中央に表示されない

2006/08/03 15:23

<html> <head> <meta http-equiv="Content-Type"content="text/html;charset=Shift_JIS"> <title>部屋</title> </head> <body leftmargin="0" topmargin="0"> <IMG src="top.gif" width="100%" height="100%" style="position:absolute; top:0px; left:0px; z-index:1"> <DIV style="position:absolute; top:0px; left:0px; z-index:2"> <p><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <strong><font size=9><center>入口</center></font></strong></p> </DIV> </body> </html> この入口という文字を中央に表示したいのですが、<center></center> というタグをどこに入れても表示できないのです。どうかよろしくお願いします。

mokomokko-
お礼率79% (46/58)

HTML
回答数6
ありがとう数5

みんなの回答 （6）
専門家の回答

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

ベストアンサー

shippo
ベストアンサー率38% (1216/3175)

2006/08/03 15:37 回答No.3

下から6行目の <DIV style="position:absolute; top:0px; left:0px; z-index:2"> の文を <DIV style="position:absolute; top:0px; left:50%; z-index:2"> としたら真中に表示されると思いますよ。

質問者

お礼 2006/08/03 15:44

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

その他の回答 (5)

goldfox
ベストアンサー率49% (123/249)

2006/08/03 15:47 回答No.6

<IMG src="top.gif" width="100%" height="100%"～縦横ともに100%だと、ブラウザの大きさによってはひしゃげた絵になるので、お勧めはできません。（すべての閲覧者がフルスクリーンで見ているとは限りませんし、解像度によっては縦横の比率が違います。） <font size=9>fontサイズの値は1（最小）～7（最大）までです。 7よりも大きくしたいなら、スタイルシートによるサイズ指定をお勧めします。

goldfox
ベストアンサー率49% (123/249)

2006/08/03 15:42 回答No.5

参考URL：: http://www.tagindex.com/index.html

質問者

お礼 2006/08/03 15:46

早速のご回答ありがとうございました。無事解決できました。

nyonyon
ベストアンサー率51% (893/1745)

2006/08/03 15:38 回答No.4

ＨＰビルダーの「どこでも配置モード」で作成されていませんか？他の方の回答とかぶりますが、<DIV>属性で絶対指定にて位置を固定しているため、相対的な中央揃えは出来ません。どうやら画像の中央に「入口」という文字を設定されたいようですからここは一つ、表を使って設定してみてはどうでしょうか。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META http-equiv="Content-Style-Type" content="text/css"> <title>部屋</title> </head> <BODY leftmargin="0" topmargin="0"> <CENTER> <TABLE border="0" width="100%" height="100%"> <TBODY> <TR> <TD background="top.gif" align="center"><strong><font size=9>入口</font></strong></TD> </TR> </TBODY> </TABLE> </CENTER> </BODY> </html> セルの背景に画像を設定していますので、セルの大きさは画像サイズに合わせて調整下さい。

質問者

お礼 2006/08/03 15:45

早速のご回答ありがとうございました。無事解決できました。

honey_1190
ベストアンサー率11% (5/42)

2006/08/03 15:30 回答No.2

</DIV>の位置のせいだと思います。 <html> <head> <meta http-equiv="Content-Type"content="text/html;charset=Shift_JIS"> <title>部屋</title> </head> <body leftmargin="0" topmargin="0"> <IMG src="top.gif" width="100%" height="100%" style="position:absolute; top:0px; left:0px; z-index:1"> <DIV style="position:absolute; top:0px; left:0px; z-index:2"></DIV> <p><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <strong><font size=9><center>入口</center></font></strong></p> </body> </html> でやってみてください。

質問者

お礼 2006/08/03 15:37

早速のご回答ありがとうございます。今やってみたのですが文字が表示されなくなってしまいました。

noname#20925

2006/08/03 15:29 回答No.1

<DIV style="position:absolute; top:0px; left:0px; z-index:2"> ↑この行で左上にくっつくように指定してるからかな。

質問者

お礼 2006/08/03 15:34

さっそくのご回答ありがとうございます。なぜそのタグにしたかというと、「top.gif」という画像を画面全体に表示するために検索サイトで探して出てきたタグをそのまま貼り付けしたのです。画像を画面全体に表示しつつ入口という文字をを中央に表示するためにはどこを直せばいいのでしょうか？

関連するQ&A

innerTextで文字を変えたいのですが
配列imに入っている数値が1なら"ok"と表示、0なら"-----"と表示したいのです。以下のソースなのですが <html> <head> <style type=text/css> .im{ font-size:1.5em; font-weight:500; color:#ffffff; text-dacoration:none; text-decoration:blink; z-index:3; } </style> <script langage="JScript"> var im=new Array(30); var haba=0; //初期設定 function Preferences(){ for(i=1;i<=30;i++){ obj=document.getElementById("num"+i); obj.style.posTop+=haba; haba+=25; } for(f=1;f<=30;f++){ im[f]=0; im[2]=1; im[5]=1; if(im[f]==0){ num="num"+f; num.innerText="----------"; }else{num.innerText="ok";} } } </script> </head> <body bgcolor="#0000000" onLoad="Preferences()"> <div id="num1" class="im" style="position:absolute;top:25px;left:240px;">A1</div> <div id="num2" class="im" style="position:absolute;top:25px;left:240px;">A2</div> <div id="num3" class="im" style="position:absolute;top:25px;left:240px;">A3</div> <div id="num4" class="im" style="position:absolute;top:25px;left:240px;">A4</div> <div id="num5" class="im" style="position:absolute;top:25px;left:240px;">A5</div> <div id="num6" class="im" style="position:absolute;top:25px;left:240px;">A6</div> <div id="num7" class="im" style="position:absolute;top:25px;left:240px;">A7</div> <div id="num8" class="im" style="position:absolute;top:25px;left:240px;">A8</div> <div id="num9" class="im" style="position:absolute;top:25px;left:240px;">A9</div> <div id="num10" class="im" style="position:absolute;top:25px;left:240px;">A10</div> <div id="num11" class="im" style="position:absolute;top:25px;left:240px;">A11</div> <div id="num12" class="im" style="position:absolute;top:25px;left:240px;">A12</div> <div id="num13" class="im" style="position:absolute;top:25px;left:240px;">A13</div> <div id="num14" class="im" style="position:absolute;top:25px;left:240px;">A14</div> <div id="num15" class="im" style="position:absolute;top:25px;left:240px;">A15</div> <div id="num16" class="im" style="position:absolute;top:25px;left:240px;">A16</div> <div id="num17" class="im" style="position:absolute;top:25px;left:240px;">A17</div> <div id="num18" class="im" style="position:absolute;top:25px;left:240px;">A18</div> <div id="num19" class="im" style="position:absolute;top:25px;left:240px;">A19</div> <div id="num20" class="im" style="position:absolute;top:25px;left:240px;">A20</div> <div id="num21" class="im" style="position:absolute;top:25px;left:240px;">A21</div> <div id="num22" class="im" style="position:absolute;top:25px;left:240px;">A22</div> <div id="num23" class="im" style="position:absolute;top:25px;left:240px;">A23</div> <div id="num24" class="im" style="position:absolute;top:25px;left:240px;">A24</div> <div id="num25" class="im" style="position:absolute;top:25px;left:240px;">A25</div> <div id="num26" class="im" style="position:absolute;top:25px;left:240px;">A26</div> <div id="num27" class="im" style="position:absolute;top:25px;left:240px;">A27</div> <div id="num28" class="im" style="position:absolute;top:25px;left:240px;">A28</div> <div id="num29" class="im" style="position:absolute;top:25px;left:240px;">A29</div> <div id="num30" class="im" style="position:absolute;top:25px;left:240px;">A30</div> </body> </html> innrTextで表示する文字を変えるところがおかしいんだと思いますがどう直せばいいのか分かりません。どなたか教えてください。
- ベストアンサー
- JavaScript
スタイルシートでスクロールは可能ですか？
以下のように、フッターを下部に固定し上部をスクロールするようにしました。スクロールバーは出て(IE6.0)フッターとの重なりは阻止されますが、スクロールバーの操作はできません。＜scroll=内容を切り抜く＞ということから当然のことなのでしょうか？ <!DOCUTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML> <HEAD> 　　<TITLE>Test</TITLE> 　　<STYLE type="text/css"> 　　#left { 　　 position:absolute; 　　 top: 130px; 　　 left: 100px; 　　 width: 300px; overflow: scroll; 　　} 　　#main { 　　 position:absolute; 　　 top: 130px; 　　 left: 400px; 　　} 　　#right { 　　 position:absolute; 　　 top: 130px; 　　 left: 700px; 　　} 　　#footer { 　　 position:absolute; 　　 bottom: 0px; 　　 left: 100px; 　　} 　　</STYLE> </HEAD> <BODY> <div id="left"> 　left<br/> <br/> 　left<br/> </div> <div id="main"> 　main </div> <div id="right"> 　right </div> <div id="footer"> 　footer </div> </BODY> </HTML>
- ベストアンサー
- ホームページ作成ソフト
ブラウザの中央へ表示させたいのですが教えてください。
こんにちは CSSを使ってサイトをブラウザの中央へ表示させたいのですがうまくいかなくて、困っています。 div.box3 { /* タイトルロゴ */ width: 820px; height: 152px; position: absolute; top: 10px; left: 180px; text-align: center; } </head> <body> <div class="box3">aaaa</div> など <body align="center"> などを使って試してみたのですが、うまくいきません。 text-align: center;を無効にしてしまう原因・理由などがあれば教えて下さい。どうぞ宜しくお願いします。
- 締切済み
- HTML
ｃｓｓについて困っています
<html> <head> <title>Webサイト</title> <style type="text/css"> body { background-color : #FFEAEF }  </style> </head> <body> <div id="example"> <div id="example1"> <h1>テスト中</h1> </div> <div id="boxL"> ボックス左 </div> <div id="boxR"> ボックス右 </div> <div id="footer"> <strong><center>ここに必要ならタグと共に記入<BR> <a href="test2.html">top</a></strong> </div> </div> </body> </html> これを表示した時、下のピンクの部分に文字やリンクを書きたいのですがどうしたらいいですか？
- ベストアンサー
- その他([技術者向] コンピューター)
このタグですが、ページを右端から左へ縮めても、常に中央に位置させたいのですが、、
このタグですが、ページを右端から左へ縮めても、常に中央に位置させたいのですが、、、 <BODY> <DIV style="top : 56px;left : 95px; position : absolute; z-index : 1; width : 336px; height : 21px; " id="Layer1" align="center"><FONT size="+4">テキスト</FONT></DIV> </BODY>
- ベストアンサー
- HTML
HP作成／広告表示について
忍者ツールでHP作成中です。規定の広告の表示位置がうまく一番下に表示されないので質問させてもらいます。 http://www.shinobi.jp/faq/category.html?category_id=3#95 ↑ではHTMLに誤り等があると書いてありますが、超がつくほどの素人のためなかなか解消できずにいます。どなたかアドバイスよろしくお願いします。製作中ソースは下記です。 <html> <head> <body> <body bgcolor="#ffffff"> <p> <div align="center"> next <br><br><br><A Href="http://★" Target="_blank"> 12/2 イベント</a><br><br><br><br> 11/13 更新<br><br> 11/14 更新予定 <img src="☆.jpg" border="0" style="position:absolute;top:320px;left:460px;"> <img src="★.jpg" border="0" style="position:absolute;top:320px;left:460px;"> </A Href></font></style> </A></style></div></body> </HTML> </head> <title>メイン</title> 不要タグなど他のご指摘は今回スルーさせて頂きます。広告表示位置がなぜか『11/14 更新予定』の真下に表示されてしまいます。
- ベストアンサー
- HTML
写真と文字の大きさをそろえたい
ビルダーを使いながらやっているのですが二つのものを左右に並べて上下同じ大きさで表示したいのですが、下記では同じ大きさになっていると思うのですが、大きさが（上下の大きさのみ※左右は異なってよいのですが）ことなって表示されてしまいます。解決方法を教えてください。。。 <DIV style="width : 191px;height : 335px;top : 94px;left : 157px; position : absolute; z-index : 10;" id="Layer8" class="hpb-lb-tb1-cell1" align="center"> <SPAN class="hpb-body4"><SPAN STYLE="line-height:1"><span style="font-size:15pt"> <B><STRONG>ここに文字</STRONG></B></SPAN></SPAN></SPAN> </DIV> <DIV style="width : 412px;height : 295px;top : 94px;left : 347px; position : absolute; z-index : 9; " id="Layer9" class="hpb-lb-tb1-cell2" align=""><IMG src="hpb_i_top10.jpg" alt="イメージ" width="412" height="295"></DIV>
- ベストアンサー
- ホームページ作成ソフト
ホームページビルダー16　ページセンター表示
現在サイトを制作しています。 Yahooなどのようにページをセンター表示をしたいのですがやり方が分かりません。調べて色々試してみましたがセンターに表示されません。どのようにするのでしょうか？以下は試しにやってみた結果です。 <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta name="GENERATOR" content="JustSystems Homepage Builder Version 16.0.1.0 for Windows"> <title></title> <style type="text/css">  </style> </head> <body> <div style="width : 180px;height : 100px;top : 33px;left : 252px; position : absolute; z-index : 2; visibility : visible; " id="Layer2"><img src="logo11.gif" width="86" height="37" border="0" alt="テスト"></div> <div style="width : 950px;height : 840px;top : 4px;left : 2px; position : absolute; z-index : 1; visibility : visible; " id="Layer1"></div> </body> </html>
- ベストアンサー
- ホームページ作成ソフト
CSSのdivで、ページ全体をセンタリング出来ない
質問させて頂きます。 <style type="text/css"> #contena { margin-right: 10px; margin-left: 10px; text-align: center; height: 900px; width: 950px; } </style></head> というように、全体をdivで囲んだにもかかわらず、何故かセンタリング出来ません。最も簡単に、このページをセンタリングするには、どうすればよいでしょうか？ホームページビルダーで「どこでも配置モード」で作ったものを、dreamweaverで作り直す場合に該当します。下記にHTMLを記載しておきます。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta name="IBM:HPB-Input-Mode" content="mode/flm; pagewidth=750; pageheight=900"> <meta name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version 14.0.8.0 for Windows"> <title>タイトル</title> <style type="text/css"> #contena { margin-right: 10px; margin-left: 10px; text-align: center; height: 900px; width: 950px; } </style></head> <body background="blue_p7b.gif"> <div id="contena"> <div style="top : 0px;left : 20px; position : absolute; z-index : 20; " id="Layer22"><img src="anim.gif" width="373" height="93" border="0" alt="ようこそ"></div> <div style="top : 18px;left : 575px; position : absolute; z-index : 2; " id="Layer4"><a href="http://www.dodgeball.or.jp/"><img src="jdba1.gif" border="0" width="106" height="30"></a></div> <div style="top : 60px;left : 143px; position : absolute; z-index : 1; " id="Layer1"><img src="logo111.gif" width="488" height="69" border="0" alt="リンク"></div> <div style="top : 219px;left : 317px; position : absolute; z-index : 27; width : 580px; height : 51px; " id="Layer28"> <p><font color="#0000ff" size="+2">コンテンツ</font></p> </div> <div style="top : 161px;left : 647px; position : absolute; z-index : 22; " id="Layer23"></div> <div style="top : 255px;left : 284px; position : absolute; z-index : 28; " id="Layer2"><img src="frendlyindx.gif" width="546" height="410" border="0"></div> <div style="top : 216px;left : 652px; position : absolute; z-index : 23; " id="Layer24"></div> <div style="top : 304px;left : 50px; position : absolute; z-index : 26; " id="Layer27"></div> <div style="top : 754px;left : 47px; position : absolute; z-index : 19; width : 707px; height : 154px; " id="Layer21"><iframe frameborder="1" src="saishijoho.html" width="709" height="150" scrolling="AUTO"></iframe></div> <div style="top : 953px;left : 40px; position : absolute; z-index : 7; " id="Layer9"><a href="taikaikekka.html"><img src="button41.gif" width="57" height="54" border="0" alt=" "></a></div> <div style="top : 659px;left : 48px; position : absolute; z-index : 6; " id="Layer8"><img src="logo1.gif" width="194" height="65" border="0" alt="最新情報 "></div> <div style="top : 1020px;left : 34px; position : absolute; z-index : 12; </div> </body> </html> 詳しい方がいましたら、よろしくお願いします。
- ベストアンサー
- ホームページ作成ソフト
Divの入れ子とHeight
こんにちわ。初歩的な質問かもしれませんがお願いします。 DivのContainerの中にPosition:Absoluteの３つのDivを入れ子にしたいんですが、Containerの高さを中身のDivの高さに依存する形にしたいのですが、うまくいきません。 Containerの高さと中身のコンテンツの高さをAutoにした場合、中身のほうは内容に依存する形で高さが自動になるんですが、Containerのほうがうまくいきません。FloatをつかわずにPosition:Absoluteでして、Containerを中身の高さに依存、という風にする方法はないのでしょうか？こちらがコードです。 HTML　CODE <HTML> <HEAD> <link rel="stylesheet" href="hp.css" type="text/css" /> </HEAD> <BODY> <div class="container"> <div class="banner"> </div> <div class="menu"> </div> <div class="main"> a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br> </div> </div> </BODY> </HTML> CSS　CODE * {margin:0;padding: 0;} div.container{border:2px solid RGB(888888); position: absolute; top:20px; left:50px; width:900px; height:auto;} div.banner { position: absolute; top:20px; left:80px; width:700px; height:150px; border:2px solid RGB(888888);} div.menu{ position: absolute; top:190px; left:30px; width:150px; height:300px; font-weight:bold; border:2px solid RGB(888888);} div.main{ position:absolute; top:190px; left:200px; width:600px; height:auto; border:2px solid RGB(888888);}
- ベストアンサー
- HTML

どうしても文字が中央に表示されない