Por que não consigo centralizar com a margem: 0 automático?

130

Eu tenho uma #headerdiv que é 100% widthe dentro dessa div tenho uma lista não ordenada. Eu me inscrevi margin: 0 autona lista não ordenada, mas ela não será centralizada na div do cabeçalho.

Alguém pode me dizer por que? Eu pensei que, se eu definir a largura da div pai, a lista não ordenada poderá se centralizar margin: 0 auto. o que estou perdendo?

Aqui está o meu código:

<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>

html css margin

— zeckdude
fonte

Qual navegador você está usando? O IE / Win tem alguns problemas com o Margin auto.

— JD Frias

Por que você também flutua sua ul para a direita? Retire isso e, provavelmente, também a bóia: deixada para o li, e você ficará bem.

— Simon

1

Estou criando uma barra de navegação. Peguei a bóia direita para o ul e coloquei uma bóia esquerda para o li, mas isso coloca tudo à esquerda agora.

— zeckdude

135

Você precisa definir a largura do elemento que você está centralizando, não o elemento pai.

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

Edit : Ok, eu vi a página de teste agora, e aqui está como eu acho que você deseja:

#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;
}

— PatrikAkerstrand
fonte

2

e se a largura do ul for dinâmica. Estou pensando em colocar dinamicamente diferentes textos nos li's com PHP mais tarde, então estou tentando antecipar isso.

— zeckdude

2

Sim, então você não pode centralizar usando a margem: auto;

— PatrikAkerstrand

1

Tentei sua sugestão mais recente, mas não funcionou. Fiz upload da versão mais recente com suas recomendações no mesmo local para que você possa ver o que estou experimentando. O ul está sendo empurrado para a direita cerca de 50px.

— zeckdude

1

Como eu disse na minha sugestão, remova a bóia: left

— PatrikAkerstrand 8/09/09

1

Isso funcionou muito bem! Muito obrigado por ficar comigo e me ajudar! Esse problema está me matando! Obrigado novamente!

— zeckdude

43

Um bloco embutido cobre toda a linha (da esquerda para a direita), para que uma margem esquerda e / ou direita não funcione aqui. O que você precisa é de um bloco, um bloco tem bordas à esquerda e à direita para que possa ser influenciado pelas margens.

É assim que funciona para mim:

#content {
display: block;
margin: 0 auto;
}

— Hoeks
fonte

Obrigado por sugestão muito útil, eu tive o mesmo problema com um elemento inline e eu não conseguia descobrir por que ele não estava funcionando

— mastazi

Esta é a melhor resposta e funciona em janelas de vários tamanhos.

— Yuda Prawira

14

Por que não?

#header {
    text-align: center;
}

#header ul {
    display: inline;
}

— kalys.osmonov
fonte

Adicionei alinhamento de texto: esquerda; para #header ul para centralizar a ul e manter o texto no li alinhado à esquerda. Eu também precisava definir o ul para exibir como bloco embutido para que a largura fosse dinâmica (automática).

— Brent Auto

3

Eu não sei por que a primeira resposta é o melhor, eu tentei e não funciona de fato, como @ kalys.osmonov disse, você pode dar text-align:centerpara header, mas você tem que fazer ulcomo inline-blockem vez de inline, e também você tem que observar que text-alignpode ser herdado, o que não é bom até certo ponto; portanto, a melhor maneira (não funciona abaixo do IE 9) é usar margine transform. Basta remover float righte margin;0 autode ul, como abaixo:

#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 */
}

Dessa forma, pode-se corrigir o problema de tornar a largura dinâmica do ulcentro se você não se importa com o IE8, etc.

— bill dou
fonte

0

Podemos definir a largura para a tag ul e, em seguida, alinharemos o centro.

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

— Vani S
fonte