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!