Почему я не могу центрировать с запасом:0 авто?
Вопрос
У меня есть #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>
Решение
Вам нужно определить ширину элемента, который вы центрируете, а не родительского элемента.
#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;
}
Другие советы
Встроенный блок покрывает всю строку (слева направо), поэтому поля слева и / или справа здесь работать не будут.Что вам нужно, так это блок, у блока есть границы слева и справа, поэтому на него могут влиять поля.
Вот как это работает у меня:
#content {
display: block;
margin: 0 auto;
}
Почему бы и нет?
#header {
text-align: center;
}
#header ul {
display: inline;
}
Я не знаю, почему первый ответ является лучшим, я попробовал его и на самом деле не работает, как сказал @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 и т.д.
Мы можем установить ширину для тега ul, тогда он будет выровнен по центру.
#header ul {
display: block;
margin: 0 auto;
width: 420px;
max-width: 100%;
}