Foros del Web » Creando para Internet » CSS »

[SOLUCIONADO] centro de div responsive

Estas en el tema de centro de div responsive en el foro de CSS en Foros del Web. Hola amigos, estoy tratando de hacer unas cajas de tamaños dinamicos. la idea es tener un div centrodo en pantalla con un minitmo de 600PX ...
  #1 (permalink)  
Antiguo 19/02/2014, 12:03
Avatar de arcanisgk122  
Fecha de Ingreso: junio-2010
Mensajes: 755
Antigüedad: 11 años, 6 meses
Puntos: 28
centro de div responsive

Hola amigos, estoy tratando de hacer unas cajas de tamaños dinamicos.

la idea es tener un div centrodo en pantalla con un minitmo de 600PX y un maximo de 800 px pero el maximo no me funciona:

Código CSS:
Ver original
  1. .caja{
  2.     position: absolute;
  3.     top: 50%;
  4.     left: 50%;
  5.     min-width: 600px;
  6.     max-width: 800px;
  7.     height: 400px;
  8.     margin-top: -200px;
  9.     margin-left: -300px;
  10.     }
__________________
Cooler Master Gladiator 600 - AMD PHENOM II X4 955 @ 3.5GHZ
GA-MA78GM-US2H - Super Talent 800 2GB x 2 Dual, (Unganged)
PSU Cooler Master eXtreme Power Plus 500W - Saphire R7-260OC-2GB
  #2 (permalink)  
Antiguo 19/02/2014, 12:40
Avatar de siddartha23  
Fecha de Ingreso: septiembre-2013
Mensajes: 357
Antigüedad: 8 años, 2 meses
Puntos: 39
Respuesta: centro de div responsive

Podrías probar aumentándole un tamaño en porcentaje al div para que sea flexible y dependa del tamaño de la pantalla { width:100%;}...

Otra cosa, por que no reemplazas las líneas 2,3,4,8 y 9 por {margin: 0 auto;} si quieres que el div esté centrado??
  #3 (permalink)  
Antiguo 19/02/2014, 13:18
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.485
Antigüedad: 19 años, 4 meses
Puntos: 2113
Respuesta: centro de div responsive

Como dicen, tienes que especificar que mida 100%. Esto es así debido a que al posicionar el elemento de forma absoluta se pierde la anchura automática del elemento en bloque —auto.

Probablemente también necesitarás centrarlo dependiendo de su anchura, que no conocerás. Luego podrías usar transform, entonces te quedaría algo así:

Código CSS:
Ver original
  1. .caja {
  2.   position: absolute;
  3.   top: 50%;
  4.   left: 50%;
  5.   width: 100%;
  6.   min-width: 600px;
  7.   max-width: 800px;
  8.   height: 400px;
  9.   transform: translate(-50%);
  10. }

Ya que necesitas moverlo también hacia arriba, usé translate en lugar de usar sólo translateX, te ahorras una linea.

siddartha23 es un elemento posicionado de forma absoluta, ahí no funcionan, ni deben, los márgenes automáticos.

Etiquetas: centro, responsive, tamaño
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 22:25.