Centro LI elementos em um menu CSS no IE?

Question

Eu preciso centralizar um menu CSS que tem uma largura desconhecida. Eu encontrei uma solução. Ao definir a tag UL para exibição: tabela ou display: inline-quadro os elementos LI podem ser alinhados no centro

.

Esta solução não funcionou no IE. Existe uma outra solução que irá funcionar no IE, com apenas HTML / CSS?

Se você quer uma boa olhada no meu código que eu colei aqui .

Answer 1

Como sobre isto? funciona para mim no IE6, IE7, Firefox.

Markup:

<div id='menu-centered'>
    <ul>
        <li><a href="">My first item</a></li>
        <li><a href="">My second item</a></li>
        <li><a href="">My third item</a></li>
        <li><a href="">My fourth item</a></li>
        <li><a href="">My fifth item</a></li>
    </ul>
</div>

CSS:

#menu-centered {
    background-color: #0075B8;
    padding: 10px;
    margin: 0;
}

#menu-centered ul {
    text-align: center;
    padding: 0;
    margin: 0;
}

#menu-centered li {
    display: inline;
    list-style: none;
    padding: 10px 5px 10px 5px;
}

#menu-centered a {
    font: normal 12px Arial;
    color: #fff;
    text-decoration: none;
    padding: 5px;
    background: #57a8d6;
}

#menu-centered a:hover {
    background: #5fb8eb;
}

A chave para a coisa toda foi basicamente fazer text-align: center; no elemento <ul>. Você também nunca realmente quer fazer coisas como display: table; - é apenas hackish e como você descobriu não funciona em todos os navegadores. Pois desta forma evita flutuante você também não precisa ter o elemento claro lá dentro, embora você poderia ter removido que de qualquer maneira, adicionando overflow: auto; ao <ul>. Espero que ajude.