为什么我不能以0自动为中心？

我有一个 #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>
445546 次浏览
小开
最佳答案

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

#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;
}
小开

为什么不呢？

#header {
text-align: center;
}


#header ul {
display: inline;
}
小开

Inline-block 覆盖整行(从左到右) ，因此左边距和/或右边距在这里不起作用。你需要的是一个块，块的左边和右边都有边框，所以可以受边距的影响。

对我来说是这样的:

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

我不知道为什么第一个答案是最好的，我试过了，但事实上没有工作，作为@kalys。Osmonov 说，你可以把 text-align:center给 header，但是你必须把 ul变成 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中心动态宽度的问题。

小开

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

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

提交答案