为什么我不能以 margin: 0 auto 居中？答案

【问题标题】：Why can't I center with margin: 0 auto?为什么我不能以 margin: 0 auto 居中？
【发布时间】：2010-11-01 02:35:51
【问题描述】：

我有一个#header div，即100% width，在该 div 中我有一个无序列表。我已将margin: 0 auto 应用于无序列表，但它不会在标题 div 中居中。

谁能告诉我为什么？我认为如果我定义了父 div 的宽度，那么无序列表应该能够以margin: 0 auto 为中心。我错过了什么？

这是我的代码：

<style>

* {
    margin: 0;
    padding: 0;
}

#header {
    width: 100%;    
    background-color: #333;
    min-height: 160px;
    font-family:Arial, Helvetica, sans-serif;
}

#sitename {
    font-size: 50px;
    width: 620px;
    margin:0 auto;
    padding-top: 35px;
    color:#999;
}

#header ul {
    float: right;
    margin: 0 auto;
}

#header ul li {
    float: left;
    padding-right: 20px;
    list-style-type: none;
    font-size: 20px;
}

</style>

</head>

<body>

<div id="header">
    <h1 id="sitename">Photography Auction Site</h1>

    <ul>
        <li>List of Photos</li>
        <li>Image Gallery</li>
        <li>Contact Us</li>
    </ul>
</div>

</body>
</html>

【问题讨论】：

你用的是什么浏览器？ IE/Win 的 Margin auto 有一些问题。
你为什么还要把你的 ul 浮动到右边？把它拿出来，可能还有 float:left for the li，你应该没问题。
我正在创建一个导航栏。我确实为 ul 取出了右侧的浮点数，并为 li 放入了左侧的浮点数，但现在它全部放在了左侧。

标签： html css margin

【解决方案1】：

您需要定义要居中的元素的宽度，而不是父元素。

#header ul {
    margin: 0 auto;
    width: 90%;
}

编辑：好的，我现在已经看到了测试页，这就是我认为你想要的：

#header ul {
    list-style:none;
    margin:0 auto;
    width:90%;
}

/* Remove the float: left; property, it interferes with display: inline and 
 * causes problems. (float: left; makes the element implicitly a block-level
 * element. It is still good to use display: inline on it to overcome a bug
 * in IE6 and below that doubles horizontal margins for floated elements)
 * The styles below is the full style for the list-items. 
 */
#header ul li {
    color:#CCCCCC;
    display:inline;
    font-size:20px;
    padding-right:20px;
}

【讨论】：

如果 ul 的宽度是动态的怎么办。我正在考虑稍后使用 PHP 在 li 中动态放入不同的文本，所以我试图预测这一点。
是的，那么你不能使用 margin: auto; 居中
我尝试了您的最新建议，但没有奏效。我已将带有您的建议的最新版本上传到同一位置，以便您查看我的体验。 ul 只是被推到右边大约 50 像素。
就像我在我的建议中所说，删除浮动：left
效果很好！非常感谢你一直支持我并帮助我！那个问题一直害死我！再次感谢！

【解决方案2】：

为什么不呢？

#header {
    text-align: center;
}

#header ul {
    display: inline;
}

【讨论】：

我添加了 text-align: left;到 #header ul 以使 ul 居中并保持 li 中的文本向左对齐。我还需要将 ul 设置为显示为 inline-block 以使宽度为动态（自动）。

【解决方案3】：

内联块覆盖整行（从左到右），因此左边和/或右边的边距在这里不起作用。你需要的是一个块，一个块在左右两边都有边框，所以会受到边距的影响。

这对我来说是这样的：

#content {
display: block;
margin: 0 auto;
}

【讨论】：

感谢您提供非常有用的建议，我在使用内联元素时遇到了同样的问题，但我不知道为什么它不起作用
这是最佳答案，适用于多尺寸窗口。

【解决方案4】：

我不知道为什么第一个答案是最好的，我试过了，实际上不起作用，正如@kalys.osmonov所说，你可以把text-align:center给header，但你必须让@ 987654323@ 为inline-block 而不是inline，而且你必须注意text-align 可以被继承，这在某种程度上是不好的，所以更好的方法（在IE 9 下不工作）是使用margin 和transform。只需从ul 中删除float right 和margin;0 auto，如下所示：

#header ul {
   /* float: right; */
   /* margin: 0 auto; */
   display: inline-block;
   margin-left: 50%; /* From parent width */
   transform: translateX(-50%); /* use self width which can be unknown */
  -ms-transform: translateX(-50%); /* For IE9 */
}

这种方法可以解决如果你不关心IE8等，使ul动态宽度居中的问题。

【讨论】：

【解决方案5】：

我们可以设置ul标签的宽度，然后它会居中对齐。

#header ul {
    display: block;
    margin: 0 auto;
    width: 420px;
    max-width: 100%;
}

【讨论】：