为什么我不能保证金居中：0自动？

130

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

html css margin

— 泽克杜德
source

你使用的是什么浏览器？IE / Win的Margin auto有一些问题。

— JD Frias

为什么您也将ul浮动到右侧？取出它，也许还有float：li的左边，你应该没事。

— 西蒙（Simon）2009年

1

我正在创建一个导航栏。我确实为ul取出了浮子，并为li放入了一个浮子，但是现在所有东西都放在了左边。

— zeckdude

135

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

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

— 帕特里克·阿克斯特兰德
source

2

如果ul的宽度是动态的，该怎么办。我正在考虑稍后通过PHP在li的目录中动态放入不同的文本，因此我正在尝试预期这一点。

— zeckdude

2

是的，那么您不能使用margin进行居中：auto;

— PatrikAkerstrand 2009年

1

我尝试了您的最新建议，但是没有用。我已将最新版本和您的建议上传到同一位置，以便您查看我的经历。ul只是被向右推了约50px。

— zeckdude

1

就像我在建议中所说的，去掉浮子：左

— PatrikAkerstrand

1

很棒！非常感谢您支持我并帮助我！这个问题一直在杀了我！再次感谢！

— zeckdude

43

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

这对我来说是这样的：

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

— 霍克斯
source

谢谢您提出的非常有用的建议，我在使用内联元素时遇到了同样的问题，我无法弄清楚为什么它不起作用

— mastazi

这是最佳答案，并且适用于多尺寸窗口。

— Yuda Prawira 2013年

14

为什么不？

#header {
    text-align: center;
}

#header ul {
    display: inline;
}

— 凯莉·奥斯莫诺夫
source

我添加了text-align：left; #header ul使ul居中，并使li中的文本与左侧对齐。我还需要将ul设置为显示为内嵌块，以使宽度动态（自动）。

— 布伦特·塞尔夫

3

我不知道为什么第一个答案是最好的，我尝试过了，其实不是工作，如@ kalys.osmonov说，你可以给text-align:center到header，但你必须做ul的inline-block，而不是inline和你也必须通知其text-align可以继承，这是不好的一定程度，以便更好的方式（不工作下面IE 9）正在使用margin和transform。只需将float right和margin;0 auto从中删除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 */
}

ul如果您不在意IE8等，这种方法可以解决使中心动态变宽的问题。

— 比尔·杜
source

0

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

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

— 瓦尼S
source