Centrar div horizontalmente (no se conoce el ancho)

[Ronin46]

para centrar un div se hace lo siguiente:

Código:

contenedor
{
width: 900px;
margin:0 auto;
}

Bien, eso funciona, pero, ¿cómo se centra horizontalmente cuando el ancho es desconocido?

[Jask]

Yo pondría:

position: absolute;
left: 50%;


SUerte

[morior]

Me parece recordar que hay una propiedad CSS que es :
display: blok

Creo que tiene varias opciones, puede mirarlo aquí:

http://www.w3schools.com/css/pr_class_display.asp

De todas formas me parece que esto se usa para modelos de bloques líquidos, aunque yo lo utilizo y me va muy bien.

[Ronin46]

Jask: La solución que pones no me sirve, ya que eso lo que hace es que el div comienze en la mitad de la página, es decir, no lo centra.

morior: No sé en qué me puede ayudar la propiedad display para solucionar el problema.

Gracias por las respuestas! seguiré investigando.

[AlbertoGarcia]

Investiga display:table;

Salud!

[Ronin46]

Perfecto AlbertoGarcia, con display:table; + margin:0 auto; consigo el efecto deseado.

Gracias!

[javi_bus]

Estoy en este caso y ya había llegado a esa solución pero no funciona con IE6. El problema es este:

Firefox y otros navegadores que cumplen el estandar:
"display:table" -> Hace que el div a centrar tenga el tamaño de su contenido y no ocupe todo el ancho disponible.
"margin:0 auto" -> Centra el div dentro del ancho disponible.

IE6:
"display:table" -> No consigue que el div a centrar tenga el tamaño de su contenido sino que sigue ocupando todo el ancho disponible.
"margin:0 auto" -> No puede centrar el div dentro del ancho disponible porque el div sigue ocupando todo el espacio disponible.

Ese es el problema analizado. Entonces, ¿cómo podría resolver esto en IE6? No puedo darle un ancho fijo al div, tiene que amoldarse a su contenido (que varía pues es generado vía php) y no ocupar todo el ancho disponible como hace ahora.

[sjam7]

wow, todavia existe el ie6? ya lo deberian de enterrar...

de que depende el ancho del div? no puedes ponerle un ancho en relacion a la pantalla como with:95%?

[javi_bus]

No puedo darle una medida. Bueno, es un poco complicado de explicar pero lo intentaré.

Dentro del div que tengo que centrar horizontalmente, hay dos divs colocados un al lado del otro:

DIV1|DIV2

Dentro de los divs van dos referencias (cada una en un linea) en las que quiero que los dos puntos (":") de ambas líneas coincidan y al mismo tiempo todo el conjunto quede centrado. Algo del tipo:

Ref. bla:|12345
Ref. fabricante:|ABCDE1234567

(lo de "Ref. X:" está en la capa de la izquierda y alineado a la derecha de la misma y las referencias propiamente dichas en la capa de la derecha y alineadas a la izquierda).

No se puede definir un tamaño porque depende de las referencias, que van variando. Y es importante que todo el conjunto quede centrado.

Al final voy a utilizar un tabla. Creo que a veces nos empeñamos demasiado en ser puristas y no meter una tabla y en este casos creo que está justificado (estoy representando datos).

De todos modos, si hay alguna forma de centrar horizontalmente un div sin dimensiones en IE6 pues estaría bien saberlo.

Un saludo

[Ronin46]

MMmm, y porqué no...

Cada div de 50% de ancho y en la misma línea (bien jugando con posiciones absolutas o bien con float)

El texto del div de la izquierda lo alineas a la derecha y el texto del div de la derecha lo alineas a la izquierda, con eso también consigues el efecto deseado si es que he entendido bien.

[javi_bus]

Lo que comentas no es exactamente lo que busco. Si hiciese eso, digamos que los dos puntos siempre quedarían justo en el centro pero no quedaría todo el conjunto centrado salvo que el texto de la derecha sea igual de largo que el de la izquierda. No sé si me explico.

De todos modos lo dicho: lo hice con una tabla (después de todo, estoy representando datos y se supone que son para eso) y así no tuve ningún problema. Pude centrar la tabla tanto en Firefox y demás como en IE6, que es el que da problemas con las capas a la hora de centrarlas sin darles un ancho. La tabla se comporta de manera diferente porque no ocupa el 100% del ancho y con un "margin:0 auto" se queda centrada.

Un saludo

[mmedia]

Lo siento mucho pero voy a complicar un poco más si cabe esta cuestión que ya estaba resuelta con el display:table

¿Cómo lo haríamos si los elementos que hay dentro del div son flotantes? En este caso el div sigue ocupando el 100% ya que al usar float en los div que contiene parece que no reconoce el ancho total del contenido que está mostrando.

No encuentro solución!