33

div、アンカー、画像を中心に作成した非常に単純な保持ページがあります。なんらかの理由で、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>

本当に簡単なことだと言いました。:)

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

ブレット

4

6 に答える 6

70

ページを quirks モードで動作させたいですか? 標準モードを強制するために 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>
于 2009-05-03T05:16:09.820 に答える
3

autodiv の両側の余白は、どこに移動するかをブラウザに任せます。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 に 1 ピクセルの境界線を追加しました。

互換モードであるため、ブラウザーに任せています。quirks モードを削除するには、次のように 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 センターが表示されます。

于 2009-05-03T05:02:24.660 に答える
2

text-align:center本体に追加します。margin:0 autodivのと組み合わせると、それができるはずです。

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 プロパティがすべて必要です。

于 2009-05-03T04:52:33.357 に答える
0

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

<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 がスターター テンプレートで使用するものです)。

于 2009-05-03T04:56:50.460 に答える
-1

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

    #container
    {
        width:100%;
    }

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

と

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

于 2010-04-06T16:16:19.757 に答える