Foros del Web » Creando para Internet » CSS »

[SOLUCIONADO] Mantener DIVs siempre centrados para galería de imágenes

Estas en el tema de Mantener DIVs siempre centrados para galería de imágenes en el foro de CSS en Foros del Web. Hola comunidad! Cómo les va? Estoy construyendo un sitio web basado en CSS3 y HTML5. Ahora me encuentro en la implementación de una galería de ...
  #1 (permalink)  
Antiguo 20/04/2015, 10:07
 
Fecha de Ingreso: abril-2015
Mensajes: 3
Antigüedad: 7 años, 9 meses
Puntos: 0
Pregunta Mantener DIVs siempre centrados para galería de imágenes

Hola comunidad!
Cómo les va?
Estoy construyendo un sitio web basado en CSS3 y HTML5.

Ahora me encuentro en la implementación de una galería de imágenes y me encontré con un inconveniente.
Quisiera saber cómo hacer para centrar 1 o más DIVs, cada uno con una imagen, dentro del DIV Galería y este a su vez dentro del DIV Contenido. Las condiciones son las siguientes:
1) Los DIVs centrados quiero que aparezcan en la misma línea horizontal. Es decir, uno al lado del otro.
2) A medida que se va angostando la ventana del navegador, quiero que el DIV que tenga que caer a la línea de abajo, lo haga sin perder el centro de la ventana.

Lo que hice fue lo siguiente:

Propiedades del DIV Contenido:
text-align: center; /* Para que el DIV Galería se coloque en el centro de Contenido */

Propiedades del DIV Galería:
display: inline-block; /* Le da el ancho necesario para contener los elementos que encierra */

Propiedades de los DIVs Imagen:
float: left; /* Para que se ubiquen en la misma línea horizontal */

Sucede es lo siguiente:

en el caso de tener 1, 2 y 3 imágenes, cuando la ventana del navegador es lo suficientemente ancha, funciona correctamente:

1 imagen:
--------------------
|-------(Img)-------|
--------------------

2 imágenes:
------------------
|--(Img)----(Img)--|
------------------

3 imágenes:
--------------------
|--(Img)-(Img)-(Img)--|
--------------------

... sin embargo, cuando la ventana del navegador no es lo suficientemente ancha, la imagen de la extrema derecha baja y dejan de estar centradas, quedando así (por la propiedad float:left;):

----------------
|-(Img)-(Img)----|
|-(Img)---------|
----------------

Alguien sabrá cómo debo declarar las propiedades de las clases CSS3 para lograr el resultado que espero?
La idea es que a medida que vayan cayendo los DIVs, éstos sigan centrados. Así:

-----------------
|---(Img)-(Img)---|
|------(Img)------|
-----------------

Desde ya, muchas gracias!
  #2 (permalink)  
Antiguo 20/04/2015, 11:05
Avatar de fede5426  
Fecha de Ingreso: diciembre-2014
Ubicación: Córdoba
Mensajes: 446
Antigüedad: 8 años, 1 mes
Puntos: 208
Respuesta: Mantener DIVs siempre centrados para galería de imágenes

Proba usando display:inline-block; y vertical-align:top; en lugar de float:left;

http://codepen.io/anon/pen/dobwjN

Código HTML:
Ver original
  1. <div class="galeria">
  2.     <div class="imagen">
  3.       <img src="http://www.legalproductivity.com/wp-content/uploads/2013/05/firefox-300x300.png" alt="" />
  4.     </div>
  5.     <div class="imagen">
  6.       <img src="http://www.lilianricaud.com/travail-en-reseau/wp-content/uploads/2012/04/google-chrome-300x300.png" alt="" />
  7.     </div>
  8.     <div class="imagen">
  9.       <img src="http://betanews.com/wp-content/uploads/2013/01/opera-logo-300x300.jpg" alt="" />
  10.     </div>
  11.   </div>

Código CSS:
Ver original
  1. .galeria{
  2.   text-align:center;
  3. }
  4.  
  5. .imagen{
  6.   width:300px;
  7.   display:inline-block;
  8.   vertical-align:top;
  9. }

Saludos

Última edición por fede5426; 20/04/2015 a las 11:11
  #3 (permalink)  
Antiguo 20/04/2015, 14:13
 
Fecha de Ingreso: abril-2015
Mensajes: 3
Antigüedad: 7 años, 9 meses
Puntos: 0
De acuerdo Respuesta: Mantener DIVs siempre centrados para galería de imágenes

Cita:
Iniciado por fede5426 Ver Mensaje
Proba usando display:inline-block; y vertical-align:top; en lugar de float:left;

[url]http://codepen.io/anon/pen/dobwjN[/url]

Código HTML:
Ver original
  1. <div class="galeria">
  2.     <div class="imagen">
  3.       <img src="http://www.legalproductivity.com/wp-content/uploads/2013/05/firefox-300x300.png" alt="" />
  4.     </div>
  5.     <div class="imagen">
  6.       <img src="http://www.lilianricaud.com/travail-en-reseau/wp-content/uploads/2012/04/google-chrome-300x300.png" alt="" />
  7.     </div>
  8.     <div class="imagen">
  9.       <img src="http://betanews.com/wp-content/uploads/2013/01/opera-logo-300x300.jpg" alt="" />
  10.     </div>
  11.   </div>

Código CSS:
Ver original
  1. .galeria{
  2.   text-align:center;
  3. }
  4.  
  5. .imagen{
  6.   width:300px;
  7.   display:inline-block;
  8.   vertical-align:top;
  9. }

Saludos
Una maravilla! GENIAL!!!
Muchísimas Gracias!!!
Anduvo de 10!
  #4 (permalink)  
Antiguo 20/04/2015, 22:50
Avatar de fede5426  
Fecha de Ingreso: diciembre-2014
Ubicación: Córdoba
Mensajes: 446
Antigüedad: 8 años, 1 mes
Puntos: 208
Respuesta: Mantener DIVs siempre centrados para galería de imágenes

De nada, me alegro que te haya servido

Etiquetas: contenedor, float, galeria, horizontal, horizontalmente, left, siempre
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 18:51.