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では中央によりません。
どのようにしたら良いでしょうか?
No.2ベストアンサー
- 回答日時:
手元にIE8がないので実際の検証はできませんが、IE8にはDOCTYPE スイッチとはまた異なる3種類のモード・スイッチが存在する様です。
【参考】http://standards.mitsue.co.jp/archives/001326.html
上記から引用ここから---------------------------------------------------------------------------
IE8には3つのレンダリングモードが存在します。
IE8モード
CSS 2.1やSelectors APIなど、Web標準を強く意識したモード。
IE7モード
IE7の標準準拠モードと同じ
IE5モード
IE7やIE6の互換モードと同じ
上記から引用ここまで---------------------------------------------------------------------------
で、更に下記のコンテンツには、どの様な条件下でどの様なモードになるか、の検証結果が一覧になっています。
【参考】http://hxxk.jp/2008/09/29/0118#sub-20080929-06
上記の「DOCTYPE スイッチの一覧表」という項目を見て下さい。この検証結果に依ると、質問者様のHTMLは
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
ですから、この場合、IE8は「IE5モード」になっている事になります。上記の引用に説明があります通り、IE5モードというのはIE7やIE6の「後方互換モード」と同じ挙動をします。
この「IE7やIE6の後方互換モード」においては、CSSの本来の仕様に準拠しない表示が数多く出てきてしまいます。例えば、”margin: auto;”が無効になるのもその一つです(その他にも沢山やっかいなバグが…下記をご覧になってみて下さい)。
【参考】http://spreadsheets.google.com/pub?key=pbrvd2wQK …
つまり、現在の質問者様の検証環境では”margin: auto;”が効いていない事になりますので、当然「中央寄せ」にはなりません。
DOCTYPEを変えられる様なら、(IE8が標準準拠モードで挙動するものに)変えてしまった方が良いでしょう。変えられないのであれば、IEの後方互換モード対策として、CSSを以下の様に変更してみて下さい。
body {
text-align: center;
}
.main {
width:800px;
margin: 0 auto;
text-align: left;
}
IE6時代からよく使われる対処法の一つです。
No.3
- 回答日時:
既に回答は出てますが、こんな時には「検索」が有効。
CSS ハック (ブラウザ名) (したい事)
等とフォームに入力して実行。
この回答への補足
http://www.recipe-de-cooking.com/ では同じように表記してIEでも中央寄せになっています。
なぜか私が作成した場合は中央寄せになりません。
text-align:center;
とした場合はロゴとか画像が中央寄席になってしまいます。
No.1
- 回答日時:
こんばんは
.mainに
text-align:center;
を追加してください。
他にも方法はあるので、以下を参照してください。
http://oshiete1.goo.ne.jp/qa5046862.html
この回答への補足
http://www.recipe-de-cooking.com/ では同じように表記してIEでも中央寄せになっています。
なぜか私が作成した場合は中央寄せになりません。
text-align:center;
とした場合はロゴとか画像が中央寄席になってしまいます。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS html/cssで要素が出てこなくて困ってます 1 2022/12/31 16:59
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS cssが効かなくて困ってます 1 2023/01/01 23:57
- HTML・CSS html cssのmargin 5 2022/12/03 11:04
- HTML・CSS htmltとcssのコードで 1 2022/11/26 13:37
- HTML・CSS cssの display: flex;で横並びにならずに困ってます 1 2022/12/04 13:18
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- HTML・CSS 下にスクロールしても、追従するボタンのコードを書いたのですが、ボタンの中の画像が半分しか表示されない 1 2022/04/16 21:31
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- HTML・CSS <!DOCTYPE html> <html> <head> <meta charset="utf-8 2 2023/01/05 01:04
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
HTMLフォームのSELECTの幅を一...
-
CSSのtransform: translate(-50...
-
aタグに直接style=""で:hoverを...
-
INPUT TEXT内の文字位置を指定...
-
CSSで見出し(タイトル)行の右...
-
線が極端に細いテーブルで、特...
-
cssでheight: auto;を指定して...
-
macとwindowsのレイアウト崩れ...
-
IEでCSSの中央寄せが効かない
-
端から端まで横線を引きたい
-
スタイルシートで均等割りつけ...
-
text-alignの解除の方法
-
エクセルでサイズに合ったもの...
-
htmlでテーブル内にテキストボ...
-
<tbody>は何のためにあるんでし...
-
Excel で等間隔で縦線を引きた...
-
表の幅が広がる
-
PDFへてのテキストボックスにて...
-
指定時間になったら、WEBサイト...
-
ホームページの文字が縦に表示...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
CSSのtransform: translate(-50...
-
aタグに直接style=""で:hoverを...
-
HTMLフォームのSELECTの幅を一...
-
<h1>タグの後の行間を詰めたい。
-
なぜ左に寄っているの?
-
インラインフレームの表示位置...
-
text-alignの解除の方法
-
CSSでh1とその下の文字との行間...
-
Formタグのブロックの高さについて
-
端から端まで横線を引きたい
-
FireFoxで見るとブラウザの幅に...
-
macとwindowsのレイアウト崩れ...
-
ホームページビルダー 空白の...
-
<legend>で表示されるタイトル...
-
INPUT TEXT内の文字位置を指定...
-
CSSで、height:100%の中央寄せ
-
CSSの設定
-
テキストボックスの様に文字の...
-
フッターだけが真ん中に行って...
-
スタイルシートでh1の属性行間...
おすすめ情報