CSS 使用 IE 居中 DIV
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3988034/
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
Centering DIV with IE
提问by Joel
I am trying to center a DIV, with "margin:auto". It works fine with Chrome and FF but the following code does not center the DIV with IE:
我正在尝试将 DIV 与"margin:auto". 它适用于 Chrome 和 FF，但以下代码不会将 DIV 与 IE 居中：
CSS
CSS
#container {
margin:auto;
width:950px;
height:50px;
background:#000;
}
HTML
HTML
<div id="container"></div>
What am I doing wrong?
我究竟做错了什么？
Thanks,
谢谢，
Joel
乔尔
Edit (full HTML/CSS code):
编辑（完整的 HTML/CSS 代码）：
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.2.0/build/cssreset/reset-min.css">
<style>
#container {
margin: 0 auto;
width:950px;
height:50px;
background:#000;
}
</style>
</head>
<body>
<div id="container"></div>
</body>
</html>
回答by Joel
Insert this at the top of the document:
在文档顶部插入：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
or for html5:
或为html5：
<!DOCTYPE html>
回答by JM Redwan
Margin Auto Centering
边距自动居中
Problem: When centering div tags via either the margin-left: auto; or margin-right: auto; settings, this will not work in Internet explorer unless you add the following to your style sheet for the html body:
问题：当通过 margin-left: auto; 居中 div 标签时 或边距右：自动；设置，除非您将以下内容添加到 html 正文的样式表中，否则这将无法在 Internet Explorer 中工作：
html, body {
text-align: center;
}
Don't forget to now add this to your paragraphs and headings as the above setting will now cause these to also center.
不要忘记现在将其添加到您的段落和标题中，因为上述设置现在也会使它们居中。
p {text-align: left;}
回答by Rob
Try this;
尝试这个;
#container {
margin:0 auto;
width:950px;
height:50px;
background:#000;
}
回答by askthebigo
You need to reference the doctype as mentioned by '2astalavista'
您需要引用“2astalavista”中提到的文档类型
Otherwise
除此以外
1.Center using positioning and negative margin if it is a known width
1.如果宽度已知，则使用定位和负边距居中
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.2.0/build/cssreset/reset-min.css">
<style>
#container {
position: relative;
left: 50%;
margin: 0 0 0 -475px; /* negative margin of half the width */
width:950px;
height:50px;
background:#000;
}
</style>
</head>
<body>
<div id="container"></div>
</body>
</html>
2.Use the outercontainer and text-align center to centre the element:
2.使用outercontainer和text-align center使元素居中：
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.2.0/build/cssreset/reset-min.css">
<style>
#outerContainer{
text-align: center;
}
#container {
margin: 0 auto;
width:950px;
height:50px;
background:#000;
}
</style>
</head>
<body>
<div id="outerContainer">
<div id="container"></div>
</div>
</body>
</html>
回答by Arun Prasad E S
This one worked for me:
这个对我有用：
#container {
width: 80%; /* or the width of the object inside the container */
margin-left: auto;
margin-right: auto;
}
回答by Taiwo O. Adetiloye
This worked for me with regards with the IE centering bug:
对于 IE 居中错误，这对我有用：
<div style="margin-left: auto; margin-right: auto; width: 50%;">
<div style="text-align: left; margin: 1em auto; width: 50%;">
<form action="/action_page.php">
First name:<br>
<input type="text" name="firstname" value="Tom">
<br>
Last name:<br>
<input type="text" name="lastname" value="Cruise">
<br><br>
<input type="submit" value="Submit">
</form>
</div>
</div>回答by Thomas
This should help you out:
这应该可以帮助您：
body {
text-align: center;
}
#container {
text-align: left;
margin:auto;
width:950px;
height:50px;
background:#000;
}
You do nothing wrong, IE6 does: it ignores "margin: auto;"
你没有做错，IE6 会：它忽略“边距：自动；”
回答by dougczar
You should put right & left attributes in there also:
您还应该在其中放置 right 和 left 属性：
#container
{
right: 0px;
left: 0px;
margin: 0px auto;
width: 950px;
}
