Почему я не могу центрировать с margin: 0 auto?

У меня есть div #header , 100% width которого равна 100% width и внутри этого div у меня есть неупорядоченный список. Я применил margin: 0 auto в неупорядоченный список, но он не будет центрировать его в div заголовка.

Может кто-нибудь, пожалуйста, скажите мне, почему? Я думал, что если я определяю ширину родительского div, то неупорядоченный список должен иметь возможность центрировать себя с margin: 0 auto . Что мне не хватает?

Вот мой код:

  * { 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; }       

Вам нужно определить ширину элемента, который вы центрируете, а не родительский элемент.

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

Edit : Хорошо, я видел тестовую страницу сейчас, и вот как я думаю, вы этого хотите:

 #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 to 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 и т. Д.

Мы можем установить ширину для тега ul, после чего выровняем центр.

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