Question

我正试图以"margin:auto"为中心。它适用于Chrome和FF，但以下代码不会将DIV置于IE中心：

CSS

#container {
 margin:auto;
 width:950px;
 height:50px;
 background:#000;
}

HTML

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

我做错了什么？

谢谢，

乔尔

编辑（完整的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>

Answer 1

将其插入文档顶部：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

或html5：

<!DOCTYPE html>

Reference for document type declaration

Answer 2

保证金自动居中

问题：当通过margin-left：auto对中div标签时;或者保证金权利：auto;设置，这在Internet Explorer中不起作用，除非您将以下内容添加到html正文的样式表中：

html, body {
 text-align: center;
}

现在不要忘记将此添加到您的段落和标题中，因为上述设置现在会使这些也成为中心。

p {text-align: left;}

Answer 3

试试这个;

#container {
 margin:0 auto;
 width:950px;
 height:50px;
 background:#000;
}

Answer 4

您需要引用＆＃39; 2astalavista＆＃39;

中提到的doctype

否则

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.使用外部容器和文本对齐中心使元素居中：

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

Answer 5

这个对我有用：

#container {
   width: 80%; /* or the width of the object inside the container */
   margin-left: auto;
   margin-right: auto;
}

Answer 6

这可以帮助你：

body {
    text-align: center;
}

#container {
    text-align: left;
    margin:auto;
    width:950px;
    height:50px;
    background:#000;
}

你没有做错任何事，IE6确实：它忽略了“margin：auto;”

Answer 7

你应该把对了左边的属性也在那里：

#container
{
  right: 0px;
  left: 0px;
  margin: 0px auto;
  width: 950px;
}

Answer 8

这对我来说与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>

用IE中心DIV

8 个答案: