• ベストアンサー

タイプライタ風の文字を真ん中にもってきたい

タイプライタ風の文章をセンターにもってきたいのですが、 どうしても左によってしまいます。 ブラウザの大きさを変えても常に真ん中に もってくる方法はありますでしょうか。 失敗例としては、 <DIV id="type" style="text-align:center; position:absolute; このようにtext-align:center; を入れても タイプライター風な出方がくずれてダメでした。 どうぞよろしくお願いいたします。

noname#143799
noname#143799

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

  • ベストアンサー
  • quenista
  • ベストアンサー率28% (122/425)
回答No.1

<BLOCKQUOTE> <BLOCKQUOTE> <BLOCKQUOTE> <CENTER>←ここを追記して見た。 <TABLE cellSpacing=0 cellPadding=0 border=0 WIDTH=250>←ここを替えて見た <TBODY> <TR> <TD vAlign=top align=left width=400 height=400><ILAYER height="400" width="400" name="typeN4"> <DIV id=type ここの一部を削除して見た。→style="CLIP: rect(0px 400px 400px 0px); POSITION: absolute; TOP: 118px; HEIGHT: 400px" align=left></DIV></ILAYER></TD></TR></TBODY></TABLE> </CENTER>←ここを追記して見た。 </BLOCKQUOTE></BLOCKQUOTE></BLOCKQUOTE> ----------------------------------------------------- えい!やっ! とイジってみましたけど、こんな感じの事ですか?

noname#143799
質問者

お礼

す、素晴らしいです~~!!(感涙) 完璧に真ん中になり、尚且つタイプライタ風がくずれてません! まさに「神の手」!(笑) ありがとうございました~!!! また質問があったらよろしくお願いします! でも私を探し出すのが大変か・・。 ところで、もう一つメディアプレーヤーについて質問してるのですが、 それはわかります??

noname#143799
質問者

補足

あ、メディアプレーヤーの方は 題名が「メディアプレーヤーの音が鳴らない」っていう風に なってます。

その他の回答 (2)

  • Adams2001
  • ベストアンサー率67% (70/103)
回答No.3

いまいち意味が掴めないんですが、タイプライタ的表示をするエリア自体をセンタリングしたい、ということなら <!-- ↓ここから 表示したいところへ入れる --> <DIV align="center"> <ILAYER name="typeN4" width="400" height="400"> <DIV id="type" style="width:400px; height:400px;text-align:left;"></DIV> </ILAYER> </DIV> <!-- ↑ここまで 表示したいところへ入れる --> でIE5~6とNetscape6は大丈夫だと思います。Netscape4.xがダメかも知れませんが、そもそもスクリプト・エラーで動作しませんでしたので確認できず(^_^;) てなことじゃなくて、各行がセンタリングされた状態にしてなおかつタイプライタ的、ということになると、ちょっと難しくなります。スクリプト、というかアルゴリズムを大きく変えないと無理でしょう。

noname#143799
質問者

お礼

ありがとうございました~! ちょっとタグの入れるところが悪かったのか センターにいかなかったのですが、 また頑張ってやってみます!!!

  • xruz
  • ベストアンサー率50% (72/143)
回答No.2

こんにちはVIVAYOU2000さん、xruzです。 タグを整理してみましたが、こんな感じでいいですか? 直したのは TD の align とゴミを消しただけですが。。。。 <TABLE border="0" cellpadding="0" cellspacing="0"> <TR> <TD valign="top" align="center" height="400" width="400"> <ILAYER name="typeN4" width="400" height="400"> <DIV id="type" style="position:absolute; width:400px; height:400px; clip:rect(0px 400px 400px 0px);top:118px;left:129px;"></DIV> </ILAYER> </TD> </TR> </TABLE> がんばってくださいね(~:~i

noname#143799
質問者

お礼

ありがとうございました! がんばります!! 試してみたんですが、タイプライタ風がくずれちゃったような・・。 私のタグを入れるところがおかしいのかな。 また頑張ってみます!

関連するQ&A

  • text-alignについての疑問

    スタイルシートに {text-align:center;position:absolute;bottom:50px;} と入れて、一番下にあるCopyright&copy;○○という位置を固定して、真ん中にしたいんですが そうなりません。 position:absoluteを使ったときはセンタリングできないのでしょうか?? また、この場合はどうやればいいのでしょうか?? もう一つ質問させて頂きます。 <span style="text-align:center">aaaaaaaaaaaa aaaaaaaa</span> とやってもセンタリングできません。 <span>を<div>に変えると真ん中に来ます。 <span>タグだと"text-align:center"は使えないということでしょうか?? 一つでもいいのでわかる方いらっしゃいましたらよろしくお願い致します。

    • ベストアンサー
    • HTML
  • 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で表示する文字を変えるところがおかしいんだと思いますがどう直せばいいのか分かりません。 どなたか教えてください。

  • ナビゲーションを横並びにして真ん中配置にしたい

    ナビゲーションをulタグを使って作り、横並びにしています。 さらにそれをブラウザの真ん中に配置したいのですが、真ん中になってくれません。 HTMLは以下のようにしています。 <div id="menu_top"> <ul> <li>Profile</li> <li>Information</li> <li>History</li> <li>Invitation</li> </ul> </div> CSSは以下のとおりです。 #menu_top{  margin:auto;  width:90%;  height:20px;  text-align: center; } #menu_top li{  float:left;  list-style-type:none;  margin:15px; } あとbody要素にはtext-align:centerを入れています。 現状では、ナビゲーション自体は横並びになるものの、左に寄っています。横並びのまま、真ん中に表示させるにはどのようにしたらいいでしょうか。 よろしくお願いいたします。

    • ベストアンサー
    • 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
  • テーブルを真ん中に持ってきたいだけなんです。

    ホームページビルダー7を使っています。 テーブルをウィンドウサイズに合わせて自動的に真ん中に位置されるようにしたいのです。 ネット検索や教えてgooも検索し、align="center"と入れたり、<CENTER></CENTER>でくくってみたりしてみましたが、思うように動作しません。ホームページビルダー上でソースを編集すると、なんか余計なDIVをつけられたりして、わけわかりません。 frontpage expressで作っていたときは、ソースなんて意識しなくてもできたのですが・・・。 ソースの修正でも、ホームページビルダーの機能ででもいいのですが、やり方を教えて下さい。 現在のソースは以下になります。今日一日、これに悩まされてます。 過去の質問を参考にしてもうまくいかなかったので、新規であげさせていただきました。よろしくお願いします。 <BODY bgcolor="#E8F8FF"> <DIV style="width : 580px;height : 106px;top : 99px;left : 82px; position : absolute; z-index : 1; " id="Layer2"> <DIV align="center"> <TABLE border="1" width="580" height="106"> <TBODY> <TR> <TD><FONT size="-1">サブタイトル<BR> <BR> 本文</FONT></TD> </TR> </TBODY> </TABLE> </DIV> </DIV> </BODY>

    • ベストアンサー
    • HTML
  • cssで文字を右寄せにしたいのですが

    <html> <head> <style type="text/css"> <!-- div#right { text-align: right; } --> </style> </head> <body> <DIV style="font-size:80%;" id="right;"> test </DIV> </body> </html> なぜか右寄せになりません。左に寄ってしまいます。 <DIV style="font-size:80%;" id="right;"> の部分がおかしいのでしょうか?

    • ベストアンサー
    • HTML
  • text-alignの解除の方法

    text-alignの解除の方法ってありませんか? 例えばhtml内に以下のタグがあるとして、 <div style="text-align:center;"> <div style="width:100px; height:120px; background-image:url(○○○.jpg)"> <div style="width 50px; height: 60px; position:absolute; margin-top: 20px; margin-left:5px"> <p>あいうえおあいうえお</p> </div> </div> </div> このような場合に<div style="width:100px; height:120px; background-image:url(○○○.jpg)">から、対応している</div>のtext-alignを解除する方法ってありませんか? IEの標準には対応するのですが、互換だとブロック要素までもがセンタリングされてしまうため困っています。 分かりづらくて申し訳ありません。

  • 写真と文字の大きさをそろえたい

    ビルダーを使いながらやっているのですが 二つのものを左右に並べて上下同じ大きさで表示したいのですが、 下記では同じ大きさになっていると思うのですが、 大きさが(上下の大きさのみ※左右は異なってよいのですが) ことなって表示されてしまいます。 解決方法を教えてください。。。 <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>

  • align="middle"が無視される TOPに

    <!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title lang="ja">文書タイトル</title> </head> <body> <div style="text-align:center;" style="font-size:400%;"> <IMG SRC="http://pic.prepics-cdn.com/sugarcherry/21910244.jpeg" WIDTH=100 HEIGHT=100 align="middle"> test <IMG SRC="http://pic.prepics-cdn.com/sugarcherry/21910244.jpeg" WIDTH=100 HEIGHT=100 align="middle"> </div> </body> </html> これをブラウザで表示すると、align="middle"とやってるのに、画像のように文字がTOPの位置に表示されてしまいます。 <div style="text-align:center;" style="font-size:400%;"> がなければ、文字は画像のど真ん中に表示されるのですが、 font-size:400%;はまだしも、画像もブラウザの真ん中に表示させたいので <div style="text-align:center;"で画像と文字を挟みたいです。 どうすれば、画像&文字をブラウザの真ん中に表示させつつ、文字を画像の真ん中に表示できるのでしょうか?

    • ベストアンサー
    • 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> 詳しい方がいましたら、よろしくお願いします。

専門家に質問してみよう