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

Question

Почему я не могу центрировать с полями: 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>

753 5

html css margin

5 ответов:

Comments

Ничего не найдено.

PatrikAkerstrand · Accepted Answer · 2014-06-09 10:36:40

вам нужно определить ширину элемента, который вы центрируете, а не родительский элемент.
#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;
}

Hoeks · Accepted Answer · 2014-06-09 10:37:14

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

вот как это работает для меня:
#content {
display: block;
margin: 0 auto;
}

kalys.osmonov · Accepted Answer · 2014-06-09 10:36:59

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

#header {
    text-align: center;
}

#header ul {
    display: inline;
}

bill dou · Accepted Answer · 2017-06-16 09:46:11

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

Vani S · Accepted Answer · 2018-08-22 10:13:50

мы можем установить ширину для тега ul, тогда он выровняет центр.
#header ul {
    display: block;
    margin: 0 auto;
    width: 420px;
    max-width: 100%;
}