Html 为什么这个 div/img 不会在 IE8 中居中？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/816343/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Why will this div/img not center in IE8?
提问by Brettski
I have a very simple holding page I built centering a div, anchor and image. For some reason it will not center in IE8 (either mode), and I am hoping someone can tell me why. I haven't had a chance to try it in other IE browsers. I have tried this in Chrome and FF3 where it works OK.
我有一个非常简单的保持页面，我建立了一个以 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>
I said it was really simple. :)
我说真的很简单。:)
Thank you,
谢谢，
Brett
布雷特
回答by buti-oxa
Do you really want your page to work in quirks mode? Your HTML centers fine once I added doctype to to force standards mode:
你真的想让你的页面在怪癖模式下工作吗？一旦我将 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>
回答by Nathan DeWitt
The margin of autoon the sides of the div leave it up to the browser to decide where it goes. There is nothing telling the browser that the div should be centered in the body, or left or right aligned. So it's up to the browser. If you add a directive to the body, your problem will be solved.
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>
I added a 1px border to the div so that you could see what was happening more clearly.
我为 div 添加了一个 1px 的边框，以便您可以更清楚地看到发生了什么。
You're leaving it up to the browser because it's in quirks mode. To remove quirks mode, add a doctype definition to the top, like so:
你把它留给浏览器，因为它处于怪癖模式。要移除 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>
Now you'll be able to see your 300 px div center on the page.
现在，您将能够在页面上看到 300 像素的 div 中心。
回答by Bryan
Add text-align:centerto the body. That should do it when combined with the margin:0 autoon the div.
添加text-align:center到身体。与margin:0 autodiv 上的结合使用时应该这样做。
You can center without using the text-align:centeron the body by wrapping the entire page contents in a full-width container & then setting text-align:centeron that as well.
您可以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>
(I added the containerdiv). It doesn't really change anything though... just an extra div. You still need all the same css properties.
（我添加了containerdiv）。它并没有真正改变任何东西......只是一个额外的div。您仍然需要所有相同的 css 属性。
回答by Darryl Hein
You probably want to change it to the following:
您可能希望将其更改为以下内容：
<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>
The text-align:center;is moved to the body. If you want to place other aligned left content within the div #pageContainer, then you'll need text-align:left;for that class. This is the solution that I have used in quite a few websites now and seems to work across all browsers (it's what Dreamweaver uses in it's starter templates).
将text-align:center;移动到身体。如果您想在 div 中放置其他对齐的左侧内容#pageContainer，那么您将需要text-align:left;该类。这是我现在在很多网站中使用的解决方案，并且似乎适用于所有浏览器（这是 Dreamweaver 在其入门模板中使用的）。
回答by Alex Angelico
FOR BLUEPRINT USERS This drove my nuts, until i found this post: problem with ie8 and blueprintLong story short, in you html code change the
对于蓝图用户这让我发疯，直到我找到这篇文章：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]-->
Regards Alex
问候亚历克斯
回答by ben
This works for me on IE6,7,8,FF 3.6.3:
这在 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>
