为什么我不能使用 margin: 0 auto 居中？

Question

为什么我不能使用 margin: 0 auto 居中？

140

我有一个宽度为100%的#header 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>

- zeckdude

你使用的是哪个浏览器？IE/Win 在 Margin auto 方面存在一些问题。 - JD Frias

为什么你也要将ul向右浮动？把它去掉，可能还有li的float:left也去掉，那就没问题了。 - Simon

1

我正在创建一个导航栏。我已经将ul的float right去掉，并将li的float left放入，但现在它全部都在左边了。 - zeckdude

6个回答

57

一个inline-block覆盖整行（从左到右），因此左侧和/或右侧的margin在这里不起作用。你需要的是一个block，一个block有左右边框，所以可以受到margin的影响。

这是我的工作原理：

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

- Hoeks

非常感谢您提供的有用建议，我曾经遇到过内联元素的同样问题，一直无法弄清楚为什么它不能正常工作。 - mastazi

1

这是最佳答案，适用于多尺寸窗口。 - Yuda Prawira

15

为什么不呢？

#header {
    text-align: center;
}

#header ul {
    display: inline;
}

- kalys.osmonov

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

3

我不知道为什么第一个答案被评为最佳答案，我尝试过了，事实上并没有起作用。正如@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 */
}

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

- B.D

0

我们可以为ul标签设置宽度，这样它就可以居中对齐。

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

- Vani S

0

使用此CSS将绝对定位的div居中。在这里，用您容器的选择器替换container。

container { 
  left: 50%;
  transform: translateX(-50%);
}

- Ali Valiant

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- PatrikAkerstrand · Accepted Answer

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

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