为什么我不能以边缘为中心:0自动?

I have a #header div that is 100% width and within that div I have an unordered list. I have applied margin: 0 auto to the unordered list but it won't center it within the header div.

我有一个100%宽度的#header div在这个div中我有一个无序列表。我已经将margin: 0自动应用到无序列表中，但是它不会将其居中于header div中。

Can anybody please tell me why? I thought that if I define the width of the parent div, then the unordered list should be able to center itself with margin: 0 auto. What am I missing?

有人能告诉我为什么吗?我认为，如果我定义父div的宽度，那么无序列表应该能够以margin: 0 auto为中心。我缺少什么?

Here is my code:

这是我的代码:

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

4 个解决方案

#1

117

You need to define the width of the element you are centering, not the parent element.

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

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

Edit: Ok, I've seen the testpage now, and here is how I think you want it:

编辑:好的，我现在看到了testpage，下面是我认为你想要的:

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

#2

An inline-block covers the whole line (from left to right), so a margin left and/or right won't work here. What you need is a block, a block has borders on the left and the right so can be influenced by margins.

内联块覆盖整条线(从左到右)，因此左和/或右的空白在这里不起作用。你需要的是一个块，一个块在左边和右边有边界，所以可以受到边缘的影响。

This is how it works for me:

这就是我的工作方式:

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

#3

Why not?

为什么不呢?

#header {
    text-align: center;
}

#header ul {
    display: inline;
}

#4

I don't know why the first answer is the best one, I tried it and not working in fact, as @kalys.osmonov said, you can give text-align:center to header, but you have to make ul as inline-block rather than inline, and also you have to notice that text-align can be inherited which is not good to some degree, so the better way (not working below IE 9) is using margin and transform. Just remove float right and margin;0 auto from ul, like below:

我不知道为什么第一个答案是最好的，我试过了，但没有成功，@kalys。osmonov说,你可以给text-align:中心头,但你必须让ul inline-block而非内联,同时你必须注意text-align可以继承在某种程度上是不好的,所以更好的方法(不低于IE 9)使用保证金和变换。只需删除浮动右对齐和边缘;0 auto from ul，如下所示:

#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 */
}

This way can fix the problem that making dynamic width of ul center if you don't care IE8 etc.

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

#1

117