LI-Elemente in einem CSS-Menü in IE zentrieren?

Question

Ich muss ein CSS-Menü mit einer unbekannten Breite zentrieren. Ich habe eine Lösung gefunden. Durch Setzen des UL-Tags zur Anzeige: Tabelle oder Anzeige: Inline-Tabelle können die LI-Elemente in der Mitte ausgerichtet werden.

Diese Lösung funktionierte nicht in IE. Gibt es eine andere Lösung, die im IE funktioniert, nur mit HTML/CSS?

Wenn Sie einen guten Blick auf meinen Code haben, habe ich es eingefügt here.

Answer 1

How about this? Funktioniert für mich auf 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; 
} 

Der Schlüssel zu der ganzen Sache im Grunde wurde text-align: center; auf das <ul> Element zu tun. Sie wollen auch nie wirklich Dinge wie display: table; tun - es ist nur hackish und wie Sie herausgefunden haben funktioniert nicht auf allen Browsern. Da auf diese Weise das Floaten vermieden wird, müssen Sie auch kein clear-Element dort haben, obwohl Sie das sowieso entfernen könnten, indem Sie overflow: auto; zu <ul> hinzufügen. Ich hoffe es hilft.