Почему я не могу центрировать с полем: 0 авто? - PullRequest
Новая
       22

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

124 голосов
/ 08 июня 2009

У меня есть #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>

Ответы [ 5 ]

126 голосов
/ 08 июня 2009

Вам необходимо определить ширину центрируемого элемента, а не родительского элемента. 

#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;
}
41 голосов
/ 07 апреля 2013

Встроенный блок охватывает всю строку (слева направо), поэтому поля слева и / или справа не будут работать. Вам нужен блок, блок имеет границы слева и справа, поэтому на него могут влиять поля.

Вот как это работает для меня: 

#content {
display: block;
margin: 0 auto;
}
13 голосов
/ 24 августа 2010

Почему бы и нет? 

#header {
    text-align: center;
}

#header ul {
    display: inline;
}
2 голосов
/ 16 июня 2017

Я не знаю, почему первый ответ самый лучший, я попробовал его и фактически не работает, как сказал @ 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 и т. Д.

0 голосов
/ 22 августа 2018

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

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