Elementy Center LI w menu CSS w IE?

Question

Potrzebuję wyśrodkować menu CSS o nieznanej szerokości. Znalazłem rozwiązanie. Ustawiając znacznik UL do wyświetlenia: tabela lub wyświetlacz: tabela śródliniowa elementy LI mogą być wyrównane w środku.

To rozwiązanie nie działa w IE. Czy istnieje inne rozwiązanie, które będzie działać w IE, tylko z HTML/CSS?

Jeśli chcesz dobrze obejrzeć mój kod, wkleiłem go here.

Answer 1

How about this? Działa dla mnie na 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; 
} 

Kluczem do całej sprawy był w zasadzie robi text-align: center; na elemencie <ul>. Ty też nigdy nie chcesz robić rzeczy takich jak display: table; - to po prostu hackish i jak się dowiedziałeś nie działa we wszystkich przeglądarkach. Ponieważ w ten sposób unikasz unoszenia się w wodzie, nie musisz mieć w sobie wyraźnego elementu, mimo że możesz to usunąć, dodając overflow: auto; do <ul>. Mam nadzieję, że to pomoże.