• ベストアンサー

ボックスを中央揃えにしたい

先日の質問の回答ありがとうございます。 納得のいくようにできました。 全体を囲ったボックス<div id="base">を中央揃えにしたいので、 #base{ width:800px; margin-left:auto; margin-right:auto; } と書いたのですが、 FireFoxではちゃんと中央揃えされているんですが、IEではされていません。 どうすればいいんでしょうか？お願いします。 http://www.geocities.jp/totti_asroma1927/index.html http://www.geocities.jp/totti_asroma1927/css/base.css

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

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

  • ベストアンサー
回答No.1

ドキュメントタイプ宣言からきっちり書いて標準準拠で動くように すれば、IEでも中央に揃います。今はIEが後方互換で動いてるから margin:auto非対応ってわけです。

その他の回答 (2)

noname#83877
noname#83877
回答No.3

body { text-align:center; } #base { text-align:left; }

  • qualheart
  • ベストアンサー率41% (1451/3486)
回答No.2

No1さんの回答にもありますが、DOCTYPE宣言をHTMLの一番最初に入れてください。 以下のものをコピーして入れればOKです。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

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

関連するQ&A

  • 全体のレイアウト：中央揃えについて

    画面の全体のレイアウトを中央にそろえたいと思い、「div.Zen { margin-left: auto; margin-right: auto }」を指定してもIEでは中央揃えになっていませんでした。 ところが、「body { text-align: center }」を指定したところ、中央揃えになりました。 ブラウザで比較してみると、 ■IE7 　body { text-align: center }で、中央揃え 　div.Zen { margin-left: auto; margin-right: auto }では中央にならない ■Opera9.25 　body { text-align: center }では、中央にならない 　div.Zen { margin-left: auto; margin-right: auto }で、中央揃え ■NetScape7.1 　body { text-align: center }では、中央にならない 　div.Zen { margin-left: auto; margin-right: auto }で、中央揃え ■Firefox2 　body { text-align: center }では、中央にならない 　div.Zen { margin-left: auto; margin-right: auto }で、中央揃え と、ブラウザによって中央になる指定が違うのですが何故このようなことが起こるのでしょうか？ 回答よろしくお願いします。 <?xml version="1.0" encoding="Shift-JIS" standalone="no"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja"> <head> <style type="text/css"> <!-- div.Zen { width: 900px; margin-left: auto; margin-right: auto } body { text-align: center } #Ky { float: left } div.Ku1_0 { width: 900px; height: 150px; background-color: aqua } --> </style> <title></title> </head> <body> <div class="Zen"> <div class="Ku1_0" id="Ky"></div> </div> </body> </html>

    • ベストアンサー
    • HTML
  • ３つのボックスを１つとして中央揃えするとき

    詳細は下記のページソースを見ることになりますが、私はdivで指定している #header,#sidemenu,#infoのボックスを１つのボックスとして中央揃えをしたいと思ってます。しかしなかなか上手くいかないのでどなたかご教授お願いします。 一応上記３つのボックスを新たにdivタグ（id指定）で囲んでセンタリングしてみましたがネスケとFirefoxは表示が変わらず、IEは#headerのボックスだけがセンタリングされてしまいました(HTML+CSSでのレイアウト) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/transitional.dtd"> <html> <head> <meta http-equiv="Content-Language" content="ja"> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>Top Page</title> <style type="text/css"> <!-- body { margin: 0; padding: 0; } #box { text-align: center; margin-left: auto; margin-right: auto; } #header { width: 800px; height: 100px; color: #ffffff; background-color: #ccffff; } #sidemenu { width: 300px; height: 500px; color: #ffffff; background-color: #87ceeb; float: left; } #info { width: 500px; height: 500px; color: #ffffff; background-color: #0000ff; float: left; } --> </style> </head> <body> <div id="header"> </div> <div id="sidemenu"> </div> <div id="info"> </div> </body> </html>

    • ベストアンサー
    • CSS
  • inline-blockを上下中央揃えにする方法

    以下のhtmlで、内容に合わせてブロックの大きさが変わる状態での 上下の中央揃えができず悩んでいます。 html ------------------------------------------------------------------------------------------ <div id="box1"> <div id="box2"> <div id="box3"> <div>あああああああああああああああああああああああ</div> <div>いいいいいいいいいいいいいいいいいいいいいいい</div> <div>ううううううううううううううううううううううう</div> <div>えええええええええええええええええええええええ</div> <div>おおおおおおおおおおおおおおおおおおおおおおお</div> </div> </div> </div> ------------------------------------------------------------------------------------------ css ------------------------------------------------------------------------------------------ body { text-align:center; } #box1 { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width:700px; height:400px; background:#666666; } #box2 { position: absolute; left: 0; right: 0; margin: auto; width:500px; height: 300px; background:#FFF; } #box3 { display: inline-block; text-align: left; vertical-align: middle; background:#CCCCCC; } ------------------------------------------------------------------------------------------ #box2に対して#box3の内容が、縦に伸びても短くなっても常に上下が中央に配置されるようにしたいのですが、どうにもうまくいきません。 ブロック内のテキスト自体は左揃えで、ブロックそのものが中央です。 どなたか、ご教授お願い致します。 inline-blockを上下中央揃えにする方法

    • 締切済み
    • CSS
  • divによるボックスの意図しないマージンについて

    divによるボックスの意図しないマージンについて質問致します。 よろしくお願いしますm(_ _)m 現在cssによるデザインを勉強中なのですが、「div」によるボックスを作り、センター揃えにして上下に並べようとしたら画像の矢印のような意図しないマージンができてしまいました。 divへのcssの適用の仕方がまだしっかりとわからず手探り状態で、調べてもよくわからなかったです・・・。 margin-bottom:0pxなどでもダメでした・・・。 どうか原因がわかる方がいましたらよろしくお願いします(>_<) この場合に適用しているcssは ・width:○○ ・margin-left:auto; ・margin-right:auto; だけです。 どうかよろしくお願いしますm(_ _)m

    • ベストアンサー
    • CSS
  • floatを使用すると中央寄せにならない

    CSSについて質問があります。 floatを使って2段組のレイアウトにしたのですが、 MacのIE5.2で見ると、floatを使ったdiv（container）だけ中央寄せではなく 左寄せになってしまいます。MacのSafariやFirefoxでは正常に見れました。 URL：http://fuma.xrea.jp/ /* CSSソース*/ html{height : 100%; width : 100%;} body{width : 100%; text-align : center; margin : 0px auto; padding : 0px;} #container{ margin : 0px auto; padding : 0px; width : 720px;} div#main{ text-align : left; width : 490px; margin : 0px; padding : 8px 0px; float : left;} div#side{ margin : 0px; padding-bottom : 8px; text-align : left; width : 230px; float : right;} div#copyright{ text-align : center; margin : 0px auto; padding : 10px 0px; clear : both; width : 720px;} /* HTMLソース */ <div id="container"> <div id="side">てすと</div> <div id="main">てすと</div> </div> <div id="copyright">test</div> <div align="center">を使っても中央寄せになりませんでした。 どうすれば、MacのIEでも中央寄せにできますか？

    • ベストアンサー
    • CSS
  • CSSでボックスを中央に表示させたい

    CSSでボックスを中央に表示させたいのですが、 {float:left; width: 800px; heght: 100px; height: 100px; margin: auto; text-align:left;} こんな感じでできるかと思ったのですができません。 既存の質問にもあったように margin: auto; text-align:left; と入れたのですが、左寄せのままでした。

    • ベストアンサー
    • CSS
  • 中央寄せが出来ません。

    下記の様な構成で中央寄せが出来ません。 何がいけないのでしょうか？ アドバイスお願い致します。 index.html <body> <div id="hedderdiv"> <div id="hedder"> </div> <div id="buttomgrp"> </div> </div> </body> CSSファイル #hedderdiv { width: 800px; height: 500px; margin: 0 auto; } #hedder { width: 800px; height: 280px; background-color:#3F3; position:absolute; top: 0px; left: 0px; margin: 0 auto; } #buttomgrp { width: 650px; height: 200px; background-color:#C63; position:absolute; top:200px; left:50px; margin: 0 auto; }

    • ベストアンサー
    • HTML
  • css firefox IE 画像を中央揃えにしたいです

    初心者です。よろしくお願い致します。 cssでホームページを作っています。 index.htmlに画像を中央に貼り付けたいのですが、 firefoxでは中央揃えに、IEでは左側に表示されます。 下にタグを書くので、ご回答いただけましたら幸いです。 よろしくお願い致します。 -------------------------------------------------- <html> <head> <title>○○○</title> <link href="design/index.css" rel="stylesheet" type="text/css"> </head> <body> <div class="contents"> <img src="img/tobira.jpg"> </div> </body> </html> -------------------------------------------------- /*ページのレイアウト用css*/ body{ margin:0px; padding:0px; background-color:#FFFFFF; } body a img{ border: none; align:center; } .contents{ width:800px; margin:0px auto; margin-top:100px; } h1{ color: #FFFFFF; }

    • ベストアンサー
    • HTML
  • css box　ieだけ中央寄せ出来ない

    サイトを作っています。CSSのBOXを使って、メイン部分を構成しているのですが、IEだけ中央寄せされません。どのようにすれば解決できますか？できれば<div style="text-align:center">内容</div>は使いたくないです。 <style type="text/css"> <!-- body { background-color: #EEEEEE; } .mainbox{ width:900px; height:1000px; padding:6px 6px 2px 2px; border:8px; margin-left: auto; margin-right: auto; text-align:left; background-color:#bde9ba;} body { overflow: hidden; } --> </style> <div class="mainbox"> 内容 </div> 質問に関係ありませんがクローム、オペラ、モジラでは正常に表示できるのになぜIEだけはちゃんと働かないのでしょうか？　IE迷惑ですｗ

    • ベストアンサー
    • CSS
  • CSSでロールオーバーを作って中央揃えにしたい。

    CSSを使ってロールオーバーを作成しました。 がんばっているのですが、なかなか難しく、壁ばかりです。 なんとか、ロールオーバーは出来たのですが、その画像が左揃えになっていて、中央揃えにならないのです。 どなたか、お力をお貸しください。よろしくお願い致します。 HTML ----------------------------------- <link href="css.css" rel="stylesheet" type="text/css"> <div class="contents_box2"> <h3 class="no"><a href="info.html"><img src="contents_img2_1.jpg" alt="教室のご案内" width="215" height="53" /></a></h3> <p class="contents_text2">ああああああああああああああああああああああああああああああああああああああああああああああああ <p class="contents_text2">あああああああああああああああああああああああああああああああああああああああああああああああああああああああ <p class="contents_text2"><br /> <div class="rollover01"><a href="info.html"><img src="button2.jpg" alt="詳しくはこちら" width="172" height="29" /></a></div> <img src="contents_img2_3.jpg" width="215" height="18" /></div> -------------------- css↓↓↓ ------------- BODY { COLOR: #666666; TEXT-ALIGN: center; margin-top: 0px; font: 12px/130% "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; } IMG { BORDER-RIGHT: 0px; BORDER-TOP: 0px; VERTICAL-ALIGN: bottom; BORDER-LEFT: 0px; BORDER-BOTTOM: 0px; margin: 0px; padding: 0px; } .contents_box2 { FLOAT: left; MARGIN: 0px 12px 0px 0px; WIDTH: 215px; TEXT-ALIGN: left; padding: 0px; background: url(contents_img2_2.jpg) repeat-y; } .contents_text2 { MARGIN: 10px 16px 0px } .contents_detail { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; WIDTH: 215px; PADDING-TOP: 0px; TEXT-ALIGN: center } .rollover01 { width:172px; height:29px; background:url(img/button3.jpg) no-repeat center bottom; text-align: center; } .rollover01 a { display:block; width:172px; height:29px; font-size:1px; line-height:1px; outline:none; text-align: center; } .rollover01 a:hover { text-indent:-9999px; } -------------------------------------

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する