为什么我不能以margin为中心：0 auto？
我有一个＃头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>
您需要定义您正在居中的元素的宽度，而不是父元素。
#header ul { margin: 0 auto; width: 90%; }
编辑 ：好吧，我已经看到了testing页面，这是我想你想要的：
#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; }
内联块覆盖整条线（从左到右），因此左右边距在此不起作用。 你需要的是一个区块，一个区块的左右边界可以被边界所影响。
这是对我来说是如何工作的：
#content { display: block; margin: 0 auto; }
为什么不？
#header { text-align: center; } #header ul { display: inline; }
我不知道为什么第一个答案是最好的，我试了一下，实际上并没有工作，正如@ kalys.osmonov所说，你可以给text-align:center到header ，但你必须使内联， inline-block而不是inline ，而且你必须注意到text-align可以被inheritance，这在一定程度上是不好的，所以更好的方式（不工作在IE 9以下）正在使用margin和transform 。 只需删除float right margin;0 auto和float right margin;0 auto从ul 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等，这样可以解决制作dynamic宽度的问题。
