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?
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.
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.
Você precisa definir a largura do elemento que você está centralizando, não o elemento pai.
Edit : Ok, eu vi a página de teste agora, e aqui está como eu acho que você deseja:
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.
Sim, então você não pode centralizar usando a margem: auto;
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.
Como eu disse na minha sugestão, remova a bóia: left
— PatrikAkerstrand 8/09/09
Isso funcionou muito bem! Muito obrigado por ficar comigo e me ajudar! Esse problema está me matando! Obrigado novamente!
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:
— Hoeks
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
Esta é a melhor resposta e funciona em janelas de vários tamanhos.
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
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:
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.