このdiv / imgがIE8の中央にないのはなぜですか？

StackOverflow https://stackoverflow.com/questions/816343

  •  03-07-2019
  •  | 
  •  

質問

div、anchor、imageを中心に構築した非常にシンプルな保持ページがあります。何らかの理由でIE8（どちらのモードでも）に集中しないため、誰かがその理由を教えてくれることを期待しています。他のIEブラウザで試してみる機会がありません。これをChromeとFF3で試してみましたが、正常に動作します。

<html>
<head>
<title>Welcome</title>
<style>
    #pageContainer {width:300px;margin:0 auto;text-align:center;}
    #toLogo{border:none; }
</style>
</head>
<body>
    <div id="pageContainer">
    <a href="http://portal.thesit.com" id="toSite"><img src="LOGO_DNNsmall.png" id="toLogo"></a>
    </div>
</body>
</html>

それは本当に簡単だと言った。 ：）

ありがとうございます

ブレット

役に立ちましたか？

解決

ページを本当に奇抜なモードで動作させたいですか？標準モードを強制するためにdoctypeを追加すると、HTMLは正常に機能します：

<!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="en">

<head>
<title>Welcome</title>
<style>    
    #pageContainer {width:300px;margin:0 auto;text-align:center;}    
    #toLogo{border:none; }
</style>
</head>

<body>

<div id="pageContainer">
    <a href="http://portal.thesit.com" id="toSite">
    <img src="http://stackoverflow.com/content/img/so/logo.png" id="toLogo"></a> </div>

</body>
</html>

他のヒント

divの両側にある auto のマージンは、それをどこに置くかを決めるためにブラウザに任せます。 divを本文の中央に配置するか、左右に揃える必要があることをブラウザに伝えるものは何もありません。だから、ブラウザ次第です。ボディにディレクティブを追加すると、問題は解決します。

<html>
  <head>
    <title>Welcome</title>
    <style>
      body { text-align: center;}
      #pageContainer {width:300px; margin:0px auto;
            text-align:center; border:thin 1px solid;}
      #toLogo{border:none; }
    </style>
  </head>
  <body>
    <div id="pageContainer">
      <a href="http://portal.thesit.com" id="toSite">
        <img src="LOGO_DNNsmall.png" id="toLogo">
      </a>
    </div>
  </body>
</html>

何が起こっているかをより明確に確認できるように、divに1pxの境界線を追加しました。

これは奇妙なモードになっているため、ブラウザに任せています。互換モードを削除するには、次のように上部にdoctype定義を追加します。

<!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="en">
  <head>
    <title>Welcome</title>
    <style>
      #pageContainer {width:300px; margin:0px auto;
            text-align:center; border:thin 1px solid;}
      #toLogo{border:none; }
    </style>
  </head>
  <body>
    <div id="pageContainer">
      <a href="http://portal.thesit.com" id="toSite">
        <img src="LOGO_DNNsmall.png" id="toLogo">
      </a>
    </div>
  </body>
</html>

これで、ページの300ピクセルのdivの中心が表示されます。

text-align：center を本文に追加します。 divの margin：0 auto と組み合わせると、これが実行されるはずです。

ページのコンテンツ全体を全幅のコンテナでラップすることにより、本文に text-align：center を使用せずに中央揃えできます。次に、その上で text-align：center を設定します。

<html>
<head>
<title>Welcome</title>
<style>
    #container {text-align:center;border:1px solid blue}
    #pageContainer {width:300px; margin:0 auto; border:1px solid red}
    #toLogo{border:none; }
</style>
</head>
<body>
    <div id="container">
        <div id="pageContainer">
        <a href="http://portal.thesit.com" id="toSite"><img src="LOGO_DNNsmall.png" id="toLogo"></a>
        </div>
    </div>
</body>
</html>

（ container divを追加しました）。しかし、実際には何も変わりません...ただのdivです。それでも、すべて同じCSSプロパティが必要です。

おそらく次のように変更する必要があります。

<html>
<head>
<title>Welcome</title>
<style>
    body { text-align: center; }
    #pageContainer {width:300px;margin:0 auto;}
    #toLogo{border:none; }
</style>
</head>
<body>
    <div id="pageContainer">
    <a href="http://portal.thesit.com" id="toSite"><img src="LOGO_DNNsmall.png" id="toLogo"></a>
    </div>
</body>
</html>

text-align：center; は本文に移動します。 div #pageContainer 内に他の左揃えのコンテンツを配置する場合、そのクラスには text-align：left; が必要です。これは私が現在かなりの数のWebサイトで使用しているソリューションであり、すべてのブラウザーで動作するようです（Dreamweaverがスターターテンプレートで使用しているものです）。

ブループリントユーザー向け この投稿を見つけるまで、これは私の夢を追いました： ie8とブループリントの問題 要するに、あなたのhtmlコードを変更する

 <!--[if IE]>
 <link rel="stylesheet" href="../css/blueprint/ie.css" type="text/css" media="screen, projection" /> 
<![endif]-->

for 

<!--[if lt IE 8]>
<link rel="stylesheet" href="../css/blueprint/ie.css" type="text/css" media="screen, projection" />
<![endif]-->

よろしく アレックス

これはIE6,7,8、FF 3.6.3で動作します：

    #container
    {
        width:100%;
    }

    #centered
    {
        width:350px;
        margin:0 auto;
    }

and 

    <div id="container">
        <div id="centered">content</div>
    </div>

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top