IEで中央寄せにしたい方法とは？

2023/10/28 11:29

このQ&Aのポイント

IEで要素を中央寄せにするためには、CSSのmarginプロパティを使うことができます。
IE9では、指定した幅で表示させるためには、body要素に幅の値を指定してください。
IEでは、CSSのtext-alignプロパティを使って要素を中央寄せにすることもできます。

ベストアンサー

IEで中央寄せにしたい

2013/11/05 21:53

<html> <head> <title>test</title> <style type="text/css">  </style> </head> <body> <DIV style=background:red;> test</DIV> </body> </html> これでスレイプニルだとちゃんと中央寄せになるのですがＩＥ９だと横画面いっぱいに広がってしまいます。ＩＥでも指定した幅で表示させる方法はありますか？

pvhbcgoysxb
お礼率100% (59/59)

HTML
回答数2
ありがとう数15

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

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

ベストアンサー

tkmojo
ベストアンサー率50% (105/207)

2013/11/06 10:26 回答No.2

まぁ簡単に言うと、DOCTYPE宣言が無いから互換モードになっていて IEでcssが正しく認識されていない、というのが一言で言える答えです。 http://www.htmq.com/htmlkihon/302.shtml 互換モードが何か、というのを上記サイトから引用すると、「互換モード（Quirks）は、まだCSSが普及していなかった時代の過去のブラウザとの互換のために、あえて標準仕様とは異なる解釈で表示するモードのこと」です。 IEではDOCTYPE宣言が無いとこの互換モードになります。あと、1の方も憤慨しているように、必要なものが色々ないですね。上記の宣言以外にも文字コードの指定もないし、metaも一つもない。プロでもないので完璧になれとは言いませんが、少し調べればわかる基本くらいは最低限押さえていないと今後苦労しますよ。現状の知識のまま、分からないところを質問サイトで聞くような程度では何も作れないと思います。本やサイト等を見て基礎から勉強する事をお勧めします。もう1点、ソースの話に戻りますと、下記の指定が今全く役に立っていない事はわかりますかね？ div#center { text-align: center; } div#centerというのは、<div id="center"></div>に対する指定です。 id="center"が書かれたdivが存在しないので、無駄な1行になってます。

質問者

お礼 2013/11/30 19:58

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

その他の回答 (1)

play_with_you
ベストアンサー率37% (112/301)

2013/11/05 22:30 回答No.1

IEも8以降では結構ちゃんとした表示なので、9でおかしいということはHTML的におかしいということです。＞IEで中央寄せにしたい＞ＩＥでも指定した幅で表示させる方法はありますか？なんていう次元の話じゃないので勘違いしないように。上っ面だけ取り繕ったって、汚くてメンテナンス性も悪いソースを自分で生み出して後の自分の首を絞めるだけ。そもそもそんなクソソースじゃどんなブラウザでもまともな表示が期待できるわけありませんけど。とりあえず「CSS ブロックセンタリング」でググれば即座に答えが出るので、ここでは教えません。甘やかしません。その前にダメダメすぎる記述の問題点。目についたものを適当に箇条書き。・DOCTYPE宣言が無い。その他必須なものが色々無い（練習用でわざと省いているにしてもDOCTYPEだけは駄目）。・タグは小文字。・<sytle>タグ使うにしてもHTMLのコメント「」なんかいらん。・「中央寄せ」にしたいはずの<div>ではなく何故か<body>に「margin-right : auto; margin-left : auto; width : 50%」の指定・text-align:centerは「インライン要素」のセンタリング。ブロックが中央寄せになるのは古いIEの誤った挙動。・属性値はダブルクォートで囲む。

質問者

お礼 2013/11/30 19:58

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

関連するQ&A

css box　ieだけ中央寄せ出来ない
サイトを作っています。CSSのBOXを使って、メイン部分を構成しているのですが、IEだけ中央寄せされません。どのようにすれば解決できますか？できれば<div style="text-align:center">内容</div>は使いたくないです。 <style type="text/css">  </style> <div class="mainbox"> 内容 </div> 質問に関係ありませんがクローム、オペラ、モジラでは正常に表示できるのになぜIEだけはちゃんと働かないのでしょうか？　IE迷惑ですｗ
- ベストアンサー
- CSS
IE以外は色が付かない　なぜ？
<html> <head> <title>test</title> <style type="text/css"> } #zentai{ width: 850px; margin: 0 auto; text-align: left; background-color:red; } </style> </head> <body> <div id="zentai"> test <div> </body> </html> このコードを実行するとＩＥだと、色が赤くなるのですがスレイプニルやグーグルのブラウザだと何も色が付きません。なぜでしょうか？
- ベストアンサー
- HTML
CSSレイアウトでの中央寄せ
　おせわになります。 bodyに背景画像を指定し、CSSで中央寄せをしているのですが、動作確認でブラウザ幅をこまかく拡大・縮小を繰り返すと、背景画像とコンテンツ部とが1pxずれる事があります。 Win IE6.0、7.0、MacOSX safari2.0でこの現象がおき、FF2.0はWin&Macともに問題ありません。この解決方法はありますでしょうか。ご教授のほど、よろしくお願いいたします。 ▼HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>テスト</title> <style type="text/css">  </style> </head> <body> <div id="wrapper"> <p>テスト</p> </div> </body> </html>
- ベストアンサー
- HTML
全体のレイアウト：中央揃えについて
画面の全体のレイアウトを中央にそろえたいと思い、「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">  </style> <title></title> </head> <body> <div class="Zen"> <div class="Ku1_0" id="Ky"></div> </div> </body> </html>
- ベストアンサー
- HTML
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
IEでCSSの中央寄せが効かない
common.cssという外部CSSファイルで .main{ width:800px; margin:0 auto; } としています。 HTMLを簡単に書くと <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" > <title>test</title> <meta content="text/javascript" http-equiv="Content-Script-Type"> <link media="all" type="text/css" rel="stylesheet" href="css/common.css"> </head> <body> <div class="main"> ここに中央寄せになった記述 </div> </body> </html> としています。 firefoxでは中央寄せになりますが、IE8では中央によりません。どのようにしたら良いでしょうか？
- ベストアンサー
- HTML
divタグを中央寄せでwidthを指定したい。
Webのデザインを行っているのですが、以下のような事象に困っています。ブラウザはGoogle chromeです。 <body> <div style="text-align:center;"> あいうえお </div> </body> これは中央寄せになるのです。しかし、 <body> <div style="text-align:center;width:400px;"> あいうえお </div> </body> こうすると、中央寄せが解除されてしまいます。どうしてこうなるのでしょうか？出来れば理由も含めて理解したいのですが、教えて頂けないでしょうか。
- ベストアンサー
- HTML
fixedで作ったフロートメニューを中央に配置するには
浮かせたaをbの位置に表示させたいのですが、aは左上に固定されてしまいます。 IE7では上手くいくのですが、FF3では思うように行きません。 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>TEST</title> <style> html,body{margin:0;padding:0;width:100%;height:100%;} </style> </head> <body> <div style="max-width:780px;width:100%;margin:0px auto;text-align:center;border:solid 1px #AAAAFF;color:#AAAAFF;position:fixed;">a</div> <div style="max-width:780px;width:100%;margin:0px auto;text-align:center;border:solid 1px #FFAAAA;color:#FFAAAA;">b</div> </body> </html>
- 締切済み
- HTML
コマンドボタンを中央に表示したい
<html> <head> <title>test</title> <style type="text/css">  </style> </head> <body> <div class="div_center"> <button type="button" onclick="window.open('http://www.google.co.jp/','_blank');">google</button> </div> </body> </html> なぜこのコードではコマンドボタンは中央に表示されないのでしょうか？ margin-left: auto; margin-right: auto; これは違いますか？
- ベストアンサー
- CSS
ＩＥだと左側に赤い中のテーブルが寄ってしまう
http://oshiete.coneco.net/qa8437703.html こちらで質問してご回答いただいてタグを修正したのですが、なぜかIE以外のブラウザなら、中のテーブルが中央に表示されるのにＩＥは左側に赤い中のテーブルが寄ってしまいます。対応方法を教えてください。コードは <html> <head> <title>test</title> <style type="text/css"> #zentai{ width: 850px; margin: 0 auto; text-align: left; background-color:red; } </style> </head> <body> <div id="zentai"> test </div> </body> </html> です。
- ベストアンサー
- HTML