Centro LI elementi in un menu di CSS in IE?

Question

Ho bisogno di centrare un menu CSS che ha una larghezza sconosciuta. Ho trovato una soluzione. Impostando il tag UL per display: table o la visualizzazione:. Inline-table gli elementi LI può essere allineato al centro

Questa soluzione non ha funzionato in IE. C'è un'altra soluzione che funziona in IE, con il solo HTML / CSS?

Se si vuole una buona occhiata al mio codice ho incollato qui .

Answer 1

Che ne dici di questo? funziona per me su 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;
}

La chiave di tutto è stato praticamente facendo text-align: center; sull'elemento <ul>. Inoltre non vuole veramente fare cose come display: table; - è solo hacker e come hai scoperto che non funziona su tutti i browser. Dal momento che in questo modo evita di galleggiamento anche voi non c'è bisogno di avere l'elemento chiaro in là, anche se si potrebbe aver rimosso che in ogni modo con l'aggiunta overflow: auto; al <ul>. Speranza che aiuta.