为什么div/img不在IE8中心？

问题描述：

我有一个非常简单的保持页面，我建立了一个div，锚点和图像的中心。由于某种原因，它不会以IE8为中心（任一模式），我希望有人能告诉我为什么。我没有机会在其他IE浏览器中尝试它。我已经在Chrome和FF3中尝试过，它可以正常工作。为什么div/img不在IE8中心？

<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>

我说这很简单。 :)

谢谢

布雷特

反正它无关，与IE浏览器版本。它在所有IE-s – DaDa 2009-05-03 08:00:23

中的工作原理是相同的，它更好地使用doctype，一半的错误将被修复。 – Mike 2009-05-03 09:11:31

答

你真的想让你的网页工作在怪癖模式吗？你的HTML中心精细一旦我添加的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: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>

答

添加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属性。

这确实在IE8中心，但我不明白为什么我需要它。我有其他使用保证金的网站：0 auto;以包含div为中心。 – Brettski 2009-05-03 05:00:28

旧的线程，但我想这个答案（也是普遍接受的），因为这是特别的这个答案，提醒我把文本对齐：中心到身体。 ;-) – 2012-01-17 19:11:51

答

你可能想将其更改为以下：

<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在其入门模板中使用的）。

基督知道为什么有人投票给你，因为这正是你如何集中页面 – wheresrhys 2009-05-03 12:05:56

因为IE8实际上是在这个级别的标准兼容，你确实可以应用规范和标准。正如DIV所示，text-align属性仅以内联级别元素为中心，而不是块级别eleements。文本对齐：中心;在这种情况下，只会将* text *放在正文中，而不是容器元素。正如上面的答案所述，他需要的唯一东西就是文档类型。 – 2009-05-03 14:02:02

答

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中心。

答

有关的图纸USERS 这驱使我坚果，直到我发现这个职位：problem with ie8 and blueprint 长话短说，在你的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]-->

问候亚历

答

这对我的作品上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>

为什么div/img不在IE8中心？

相关推荐