Centrar 4 divs. Nunca 3 en linea.

Jopame · #1 (**permalink**) 03/02/2014, 06:40

Hola, quiero hacer algo en concreto con 4 divs y ya he probado diferentes soluciones pero ninguna se me adapta al resultado que yo busco.

Mi objetivo es tener un resultado "responsive" a la anchura del la ventana de la siguiente forma.

Tengo 4 divs con imágenes de 500px de ancho.

El objetivos es:

En una ventana mayor de 1000px de ancho que muestre dos filas de dos imagenes cada una, centradas entre ellas y con respecto a la ventana.

Si se agranda a más de 1500px que NO "baje" la 4ª imagen quedando dos filas de 3 + 1 imágenes.

En una ventana mayor de 2000px que se muestre una sola fila con las 4 imágenes.

Si se reduce a menos de 1000px, que se apilen de una en una. 4 filas de 1 imagen cada una.

No pongo el código CSS que tengo porque he hecho cientos de pruebas y, o bien no consigo agruparlas como quiero, o bien no se centran al div que las contiene.

La idea básica es tener un div que lo contenga todo y se adapte a la ventana. width: 100%.

4 divs con las imágenes dentro. (Box1, box2, box3 y box4)

Luego dos divs "superior" e "inferior" para crear las dos filas en ventanas entre 1000px y 2000px.
Esta es la solución que he pensado para que nunca tenga una fila de 3 imágenes, ya que el superior albergará box1 y box2, mientras que el inferior albergará los divs box3 y box4.

el html que propongo es:

Código:

<body>
    <div id="contenedor">
    	       <div id="superior">
			<div id="box1">
				<imagen>
			</div>
			<div id="box2">
				<imagen>
			</div>
		</div>
		<div id="inferior">
			<div id="box3">
				<imagen>
			</div>
			<div id="box4">
				<imagen>
			</div>
		</div>
       </div>
</body>

¿Como hago que floten box1 y box3 a la izquierda dentro de su div superior o inferior pero que se mantengan centrados si su box "compañero" se "baja"?

Si me he pasado, lo siento, sigo buscando y si doy con la solución la compartiré.

Un saludo

Jopame · #2 (**permalink**) 03/02/2014, 07:39

No encuentro la manera de combinar el centrado con el float, si lo quiero centrado así me vale (Si le doy clase "box" a los 4 divs):

Código:

#contenedor{
	width: 100%;
	background-color: red;
}
#superior {
	width: 100%;
	margin: auto;
	background-color: blue;
}
#inferior {
	margin: auto;
	background-color: yellow;
}
.box {
	width: 500px;
	margin: auto;
	background-color: green;
}

Pero si quiero que vayan organizandose a medida que tienen espacio, en cuanto le meto un float funciona, pero se quedan sin centrar.

Joakin_ARG_CBA · #3 (**permalink**) 03/02/2014, 12:52

Si los queres centrar, pero a la vez darles float, seria algo asi:

Código HTML:

Ver original<div id="contenedor">
      <div id="cont-centrar">
            <img src="a.png" class="img">
      </div>
</div>

Y el CSS...

Código CSS:

Ver original#contenedor { width: 500px; height: 500px; text-align: center; }   // div que contiene el contenedor de la imagen
#cont-centrar { width: 200px; height: 200px; margin: auto; } // div centrado
.img { float: left; } // imagen que flota a la izquierda

No se si es esto lo que queres, pero segun lo que entendi queres hacer un div que se centre pero que si contenido flote a la derecha. ¿es asi?. Si lo es, el ejemplo deberia funcionar, lo hice rapido, quiza este fallado. Probalo.

pzin · #4 (**permalink**) 03/02/2014, 14:46

Pero las imágenes puedes centrarlas con text-align: center ya que son elementos en linea ¿no? Aplicándose al elemento padre. Y ese que mida o bien un 50% o un 25%, dependiendo de la resolución.

Los elementos flotados no pueden centrarse directamente, habría que mover el elemento que lo contiene, es matar moscas a cañonazos para lo que quieres hacer.

Jopame · #5 (**permalink**) 04/02/2014, 03:08

Gracias por tu respuesta.
Voy a intentar lo que me dices a ver si sale. Hay un pequeño detalle que complica el asunto, pero no quiero ni mencionarlo hasta que no consiga esto.

Mientras te dejo una imagen a ver si ayuda a esclarecer la primera explicación que si que es un poco enrevesada.

Mi idea era jugar con 3 divs contenedores (Contenedor, Superior e inferior) y luego 4 divs más (Box1, box2, box3 y box3) que contengan las imágenes. Esto último lo consideraba necesario porque no solo hay una imagen que colocar cada vez.

El contenedor se encarga de ajustarse al ancho de ventana.

El superior e inferior de que siempre se ordenen de 1 en 1, 2 en 2 o las cuatro en fila.

Pero bueno, soy de los que creen que una imagen vale más que mil palabras.

Jopame · #6 (**permalink**) 04/02/2014, 03:15

He actualizado la imagen añadiendo lo que quiero evitar con el tema de "Div Superior" y "Div inferior"

pzin · #7 (**permalink**) 04/02/2014, 03:47

Realmente te sobran varias elementos, ya que con una estructura así puedes hacerlo perfectamente:

Código HTML:

Ver original<div><img></div>
<div><img></div>
<div><img></div>
<div><img></div>

Y luego lo que te decía, pones el ancho de esos elementos al 50 o al 20%, según necesites:

Código CSS:

Ver originaldiv {
    float: left;
    width: 100%;
    text-align: center;
}
div img {
    max-width: 500px;
}
@media screen and (min-width: 1000px) {
    div {
        width: 50%
    }
}
@media screen and (min-width: 2000px) {
    div {
        width: 25%
    }
}

Y siempre se mostrarán o bien filas de una, dos o cuatro imágenes.

Jopame · #8 (**permalink**) 04/02/2014, 06:49

Que grande!!! Muchas gracias.

A veces las cosas más sencillas son la mejor solución.

Bueno ahora me puedo permitir añadir el "pero" que como me imaginaba, no ha resultado "perfecto" por esto.

Cada DIV de los 4, esta compuesto por una imagen de 500px y bajo ella tiene una tabla de una fila una celda (para que coja el estilo de la web) que mide lo ancho de la imagen y que dentro tiene un iframe...
Pues bien, esta "tablita" no atiende al mismo centrado que la imagen, en Dreamweaver lo muestra perfecto, pero en Firefox (También en IE y Chrome) la tabla se pega a la izquierda y no se centra con la imagen.

Voy a ponerme a ver si se me ocurre algo "sencillo".

Muchas gracias de nuevo.

Jopame · #9 (**permalink**) 04/02/2014, 06:50

Por cierto. Cuando lo tenga terminado y funcionando ¿Sabeis si se permite poner enlaces externos en este foro? Es por mostrar el resultado.

Un saludo.

pzin · #10 (**permalink**) 04/02/2014, 08:31

Pues pon la imagen dentro de otro elemento, en forma de bloque, le pones un margen automático para centrarlo y un ancho de lo que necesites y todo lo que pongas ahí pues que mida el 100%. No veo mayor problema.

Si, puedes poner enlaces, aunque hasta que no cumplas la regla 30/30 (días de registro y mensajes publicados) saldrán sólo como texto y no se enlazarán.

Jopame · #11 (**permalink**) 04/02/2014, 08:42

Ya está solucionado el tema de las tablas. Todo perfecto. Muchas gracias.

Aquí dejo la url del resultado, si los moderarores lo creen oportuno que lo quiten y lo siento.

http://www.racingonlineclub.com/foro/

Vaya he enviado el mensaje sin haber actualizado y no he visto lo de la regla 30/30. Si no pasa nada cuando haga el segundo 30 que se muestre.

De rebote me ha encantado el efecto de que parte de la imagen (png transparente) se vea por encima de la tabla a la que le he dado un margen negativo para que se solape, pero si lo quiero "meter" más la imagen ya no se sobrepone al iframe, ni usando z-index 1 para el iframe o tabla y 2 para la imagen. ¿los z-index no afectan a los iframes? me parece lógico pero es por preguntar, aunque si lo creéis y esto tiene tela, lo debatimos en un tema nuevo.

Muchas gracias de nuevo por la ayuda. Saludos a la comunidad.

PD: ¿Doy yo mismo el tema como solucionado?

Cita:

Iniciado por Jopame

Ya está solucionado el tema de las tablas. Todo perfecto. Muchas gracias.

Ah! El tema de las tablas ha sido sencillo, he copiado el css que quería del general y he creado una nueva clase para esta tabla con lo que todo se ha puesto donde debía.