Foros del Web » Creando para Internet » CSS »

Centrar div horizontalmente (no se conoce el ancho)

Estas en el tema de Centrar div horizontalmente (no se conoce el ancho) en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 03/02/2010, 02:45
Avatar de Ronin46  
Fecha de Ingreso: junio-2009
Mensajes: 398
Antigüedad: 8 años, 5 meses
Puntos: 8
Centrar div horizontalmente (no se conoce el ancho)

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?
__________________
http://www.controldegastos.com, acepto sugerencias para el sitio.
Repetir conmingo: "tengo que dedicar más tiempo a gozar de placer"
  #2 (permalink)  
Antiguo 03/02/2010, 03:13
Avatar de Jask  
Fecha de Ingreso: abril-2006
Ubicación: Madrid
Mensajes: 768
Antigüedad: 11 años, 8 meses
Puntos: 15
Respuesta: Centrar div horizontalmente (no se conoce el ancho)

Yo pondría:

position: absolute;
left: 50%;


SUerte
__________________
Os iusti meditabitur sapientiam
Si te he ayudado, por qué no un poquito de Karma :) ?
  #3 (permalink)  
Antiguo 03/02/2010, 04:02
Avatar de morior  
Fecha de Ingreso: agosto-2009
Ubicación: Barcelona
Mensajes: 437
Antigüedad: 8 años, 4 meses
Puntos: 12
Respuesta: Centrar div horizontalmente (no se conoce el ancho)

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.
  #4 (permalink)  
Antiguo 03/02/2010, 05:34
Avatar de Ronin46  
Fecha de Ingreso: junio-2009
Mensajes: 398
Antigüedad: 8 años, 5 meses
Puntos: 8
Respuesta: Centrar div horizontalmente (no se conoce el ancho)

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.
__________________
http://www.controldegastos.com, acepto sugerencias para el sitio.
Repetir conmingo: "tengo que dedicar más tiempo a gozar de placer"
  #5 (permalink)  
Antiguo 03/02/2010, 06:05
 
Fecha de Ingreso: mayo-2009
Ubicación: Fuerteventura
Mensajes: 324
Antigüedad: 8 años, 7 meses
Puntos: 19
Respuesta: Centrar div horizontalmente (no se conoce el ancho)

Investiga display:table;

Salud!
  #6 (permalink)  
Antiguo 03/02/2010, 06:28
Avatar de Ronin46  
Fecha de Ingreso: junio-2009
Mensajes: 398
Antigüedad: 8 años, 5 meses
Puntos: 8
Respuesta: Centrar div horizontalmente (no se conoce el ancho)

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

Gracias!
__________________
http://www.controldegastos.com, acepto sugerencias para el sitio.
Repetir conmingo: "tengo que dedicar más tiempo a gozar de placer"
  #7 (permalink)  
Antiguo 25/03/2010, 16:11
 
Fecha de Ingreso: enero-2004
Mensajes: 63
Antigüedad: 13 años, 11 meses
Puntos: 0
Respuesta: Centrar div horizontalmente (no se conoce el ancho)

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.
  #8 (permalink)  
Antiguo 25/03/2010, 18:56
Avatar de sjam7  
Fecha de Ingreso: diciembre-2001
Ubicación: Guadalajara, Mexico
Mensajes: 3.669
Antigüedad: 16 años
Puntos: 16
Respuesta: Centrar div horizontalmente (no se conoce el ancho)

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%?
  #9 (permalink)  
Antiguo 25/03/2010, 21:23
 
Fecha de Ingreso: enero-2004
Mensajes: 63
Antigüedad: 13 años, 11 meses
Puntos: 0
Respuesta: Centrar div horizontalmente (no se conoce el ancho)

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
  #10 (permalink)  
Antiguo 29/03/2010, 07:25
Avatar de Ronin46  
Fecha de Ingreso: junio-2009
Mensajes: 398
Antigüedad: 8 años, 5 meses
Puntos: 8
Respuesta: Centrar div horizontalmente (no se conoce el ancho)

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.
__________________
http://www.controldegastos.com, acepto sugerencias para el sitio.
Repetir conmingo: "tengo que dedicar más tiempo a gozar de placer"
  #11 (permalink)  
Antiguo 29/03/2010, 11:52
 
Fecha de Ingreso: enero-2004
Mensajes: 63
Antigüedad: 13 años, 11 meses
Puntos: 0
Respuesta: Centrar div horizontalmente (no se conoce el ancho)

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
  #12 (permalink)  
Antiguo 21/03/2013, 12:37
 
Fecha de Ingreso: octubre-2011
Mensajes: 20
Antigüedad: 6 años, 2 meses
Puntos: 0
Respuesta: Centrar div horizontalmente (no se conoce el ancho)

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!

Etiquetas: ancho, horizontalmente
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 06:56.