Elementos del centro LI en un menú CSS en IE?

Question

Necesito centrar un menú CSS que tiene un ancho desconocido. Encontré una solución. Al configurar la etiqueta UL para visualizar: tabla o pantalla: tabla en línea, los elementos LI pueden alinearse en el centro.

Esta solución no funcionó en IE. ¿Hay alguna otra solución que funcione en IE, con solo HTML/CSS?

Si quieres echarle un buen vistazo a mi código, lo he pegado here.

Answer 1

How about this? Funciona para mí en IE6, IE7, Firefox.

de marcado:

<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 clave de todo el asunto fue básicamente haciendo text-align: center; en el elemento <ul>. Además, nunca querrás hacer cosas como display: table;, es un hack y como descubriste no funciona en todos los navegadores. Dado que de esta forma se evita la flotación, tampoco es necesario tener el elemento claro allí, aunque se podría haber eliminado de todos modos añadiendo overflow: auto; al <ul>. Espero eso ayude.