Necesito centrar un ul dentro de un div ie6 & ie7

Question

Tengo un ul que necesito para centrarme en un div. El código que tengo (encontrará a continuación) funciona en todos los navegadores, excepto ie6 & ie7, donde el contenido se flota más a la izquierda que en el centro. He despojado mi código de lo básico. He intentado solucionar numerosos problemas sin éxito hasta el momento, por lo que cualquier ayuda al respecto sería muy apreciada.

//CSS 
#galleryThumbs { 
    width:900px; 
    height:125px; 
    text-align:center; 
    margin:0px auto; 
} 
ul.thumb { 
    margin:0; 
    padding:0; 
    list-style:none; 
    display:inline-block; 
} 
ul.thumb li { 
    width:65px; 
    height:65px; 
    margin:0 2px 0 2px; 
    border:1px solid #ffffff; 
    display:inline-block; 
    float:left; 
} 

//HTML 
<div id="galleryThumbs"> 
    <ul class="thumb"> 
     <li><img src="http://www.thewoom.co.uk/clients/lowdklea/work/01_thumb1.jpg"></li> 
     <li><img src="http://www.thewoom.co.uk/clients/lowdklea/work/01_thumb2.jpg"></li> 
     <li><img src="http://www.thewoom.co.uk/clients/lowdklea/work/01_thumb3.jpg"></li> 
    </ul> 
</div> 

Muchas gracias de antemano Brendan

Answer 1

IE 6 e IE 7 no son compatibles con display:inline-block

puede anular este con un IE CSS piratear a los inline-block elementos

zoom: 1; 
*display: inline; 

yo pondría los envuelta en IE comentarios condicionales para apuntar IE sólo .

demo en http://www.jsfiddle.net/gaby/qArVS/2

Answer 2

IE6/7 no soporta display: inline-block en elementos que son de forma predeterminada display: block. Ver también Quirksmode.org: CSS2 - The display declaration:

IE 6/7 acepta el valor sólo en los elementos naturales con un display: inline.

El <ul> es por defecto display: block, por lo que esto no va a funcionar.

Una de las soluciones es dar al <ul> una anchura fija de modo que pueda estar centrado para su matriz por margin: 0 auto.

Answer 3

el anterior (me refiero a la una con la declaración de ancho para el UL) solución es el único que se acercó a. Por cierto, 2 cosas:

1- Su declaración para el Doctype está activando el modo peculiar porque las etiquetas img no tienen el estilo xhtml correctamente cerrado.

2- Paniyar ha desarrollado una nueva propiedad para Float, CENTRE. No existe. No en mis libros, al menos.

Mis dos centavos ...

Answer 4

La solución sin hacks para Internet Explorer 7 se añade al código siguiente:

#yourdiv { 
      width: 100%; 
      position: relative; 
      text-align: center; 
    } 

      #yourdiv ul { 
        float: left; 
        position: relative; 
        left: 50% 
        text-align: center; 
      } 

        #yourdiv ul li { 
          float: left; 
          position: relative; 
          display: block; 
          right: 50%;     
        } 

Con esto se puede centrar una lista sin ordenar en Internet Explorer 7 sin cortes .