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

你真的希望你的页面在怪癖模式下工作吗？一旦我将 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 添加了一个 1px 的边框，这样你就可以更清楚地看到发生了什么。

您将其留给浏览器，因为它处于怪癖模式。要删除 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 px 的 div 中心。

于 2009-05-03T05:02:24.660 回答
2

添加text-align:center到正文中。margin:0 auto与div 上的结合时应该这样做。

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>

（我添加了containerdiv）。它并没有真正改变任何东西......只是一个额外的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;该类。这是我现在在很多网站中使用的解决方案，并且似乎适用于所有浏览器（这是 Dreamweaver 在其入门模板中使用的）。

于 2009-05-03T04:56:50.460 回答
0

对于蓝图用户 这让我发疯了，直到我发现这篇文章：ie8 和蓝图问题 长话短说，在你的 html 代码中更改

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

为了

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

问候亚历克斯

于 2009-09-11T23:24:26.837 回答
-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 回答