为什么我不能以保证金为中心:0自动?

时间:2009-06-08 06:25:41

标签: html css margin

我有一个#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>

5 个答案:

答案 0 :(得分:125)

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

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

答案 1 :(得分:41)

内联块覆盖整条线(从左到右),因此左边和/或右边距不会在这里工作。你需要的是一个块,一个块的左边和右边有边框,所以可以受到边距的影响。

这就是我的工作方式:

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

答案 2 :(得分:13)

为什么不呢?

#header {
    text-align: center;
}

#header ul {
    display: inline;
}

答案 3 :(得分:2)

我不知道为什么第一个答案是最好的答案,我试过并且实际上没有工作,因为@ kalys.osmonov说,你可以text-align:centerheader,但你必须将ul设为inline-block而不是inline,而且你必须注意text-align可以继承,这在某种程度上是不好的,所以更好方式(不在IE 9下工作)正在使用margintransform。只需从float right移除margin;0 autoul,如下所示:

#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动态宽度居中的问题。

答案 4 :(得分:0)

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

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