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

[LuisferJustBad]

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!

[fede5426]

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

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

Código HTML:

<div class="galeria">
    <div class="imagen">
      <img src="http://www.legalproductivity.com/wp-content/uploads/2013/05/firefox-300x300.png" alt="" />
    </div>
    <div class="imagen">
      <img src="http://www.lilianricaud.com/travail-en-reseau/wp-content/uploads/2012/04/google-chrome-300x300.png" alt="" />
    </div>
    <div class="imagen">
      <img src="http://betanews.com/wp-content/uploads/2013/01/opera-logo-300x300.jpg" alt="" />
    </div>
  </div>
 

Código CSS:

.galeria{
  text-align:center;
}
 
.imagen{
  width:300px;
  display:inline-block;
  vertical-align:top;
}
 

Saludos

[LuisferJustBad]

Iniciado por fede5426

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:

<div class="galeria">
    <div class="imagen">
      <img src="http://www.legalproductivity.com/wp-content/uploads/2013/05/firefox-300x300.png" alt="" />
    </div>
    <div class="imagen">
      <img src="http://www.lilianricaud.com/travail-en-reseau/wp-content/uploads/2012/04/google-chrome-300x300.png" alt="" />
    </div>
    <div class="imagen">
      <img src="http://betanews.com/wp-content/uploads/2013/01/opera-logo-300x300.jpg" alt="" />
    </div>
  </div>
 

Código CSS:

.galeria{
  text-align:center;
}
 
.imagen{
  width:300px;
  display:inline-block;
  vertical-align:top;
}
 

Saludos

Una maravilla! GENIAL!!!
Muchísimas Gracias!!!
Anduvo de 10!

[fede5426]

De nada, me alegro que te haya servido