Centro elemento de bloque horizontal que tiene ancho dinámico - CSS solo navegador cruzado

Question

Este es un tema antiguo, pero juro que está resultando más difícil de lo que debería ser.

He creado un jsfiddle para mostrar el problema. http://jsfiddle.net/motocomdigital/VfDfw/1/

Pensé que lo había descifrado, pero falla en el modo de compatibilidad IE 8.

El problema

Tengo menú de navegación, en una lista ordenada por la ONU Symantic. El envoltorio div que contiene tiene un ancho fijo que es el ancho principal del sitio web.

La lista no ordenada necesita flotar central en el contenedor. Pero ninguno de los elementos de bloque en la navegación tiene un ancho establecido.

http://jsfiddle.net/motocomdigital/VfDfw/1/

he coloreado cada elemento diferente color de fondo para que pueda ver cada elemento.

pensé que encontré una compra fix que tiene la mitad de la anchura de la envoltura en div.nav como una posición izquierda, y luego -50% de margen izquierdo en .nav ul - pero parece fallar en IE 8 compatibilidad de modo, vea a continuación violín ...

http://jsfiddle.net/motocomdigital/VfDfw/2/

¿Puede alguien sugerir una solución o un método más eficiente CSS. Está horneando mis fideos.

Gracias

---

actualización

pensé que debería actualizar mi pregunta con qué estoy usando cada div en mi ejemplo violín.

Ver mi nuevo violín. http://jsfiddle.net/motocomdigital/VfDfw/3/

Ahora he agregado una posición superior de 10px a cada elemento para que pueda ver el propósito de por qué he usado tantos divs. Pero el único problema es que esta solución no es amigable con IE 7. Entonces necesito otra solución de elementos de bloque de centrado. Ojalá hubiera una flotante : centro regla de CSS!

1. El azul oscuro div es mi horizonte 100% div ancho de mi imagen de fondo infinita de navegación para.
2. El rojo div es el contenedor que es el ancho máximo de mi sitio web. Ancho del violín: 420px.
3. El verde div es la anchura flotado de mi nav dinámico, posicionado a la izquierda: 210px (50% del ancho arriba)
4. El amarillo ul es la anchura flotado de mi nav dinámico li elementos, con margen negativo del 50%
5. El azul li son mis contenedores de botón de ancla con divisores.

Espero que esto tenga sentido. Pero esta solución casi funciona, pero es una lástima que no funcione. IE7

Answer 1

Usar el bloque de visualización y el bloque en línea con el centro de alineación de texto podría ayudarlo. Solía ​​funcionar en navegadores muy antiguos. Cambia el bloque a inline-block en el wrapper, nav, ul para hacer que se llenen por completo o "encoge" y céntralo. (No puede verificar el violín en IE antiguo, pero "debería" funcionar)

Cuando centra el texto en un div y el texto no es realmente texto, sino bloques en línea, se comportan como si fueran 'palabras' , haciendo que el contenido sea una lista centrada de elementos sin necesidad de ningún ancho fijo.

body { 
 
    font-family: Helvetica, Arial, Geneva, sans-serif; 
 
} 
 

 
#horizon { 
 
    height: 49px; 
 
    width: 100%; 
 
    overflow: visable; 
 
    position: relative; 
 
    background: url(images/nav-bg.jpg) no-repeat center top #041e75; 
 
    top: 100px; 
 
} 
 

 
#wrapper { 
 
    max-width: 420px; 
 
    margin: 0 auto; 
 
    height: 49px; 
 
    overflow: visible; 
 
    background: red; 
 
    padding:10px; 
 
    text-align:center; 
 
} 
 

 
.nav { 
 
    display:block; 
 
    height: 49px; 
 
    background: green; 
 
    padding:5px; 
 
    text-align:center; 
 
} 
 

 
.nav a { 
 
    color: #ffffff; 
 
} 
 

 
.nav ul { 
 
    background: yellow; 
 
    padding:5px; 
 
    display:block; 
 
    text-align:center; 
 
} 
 

 
.nav ul li { 
 
    display: inline-block; 
 
    background: blue; 
 
    overflow: visible; 
 
} 
 

 
.nav ul li a { 
 
    display: block; 
 
    height: 49px; 
 
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.50); 
 
    padding-right: 10px; 
 
    padding-left: 10px; 
 
} 
 

 
.nav ul li a:hover { 
 
    text-decoration: none; 
 
    background-color: rgb(6, 29, 93); 
 
    background-color: rgba(13, 43, 119, 0.95); 
 
}

<div id="horizon"> 
 
    
 
    <div id="wrapper"> 
 
    
 
     <div class="nav">     
 
     
 
      <ul> 
 
     
 
       <li><a href="#" title="home">Home</a></li> 
 
       <li><a href="#" title="about">About</a></li> 
 
       <li><a href="#" title="menu">Menu</a></li> 
 
       <li><a href="#" title="map">Map</a></li> 
 
       <li><a href="#" title="contact">Contact</a></li> 
 
     
 
      </ul> 
 
    
 
     </div> 
 
     
 
    </div> 
 
    
 
</div>