Alinear al centro del contenedor y alinear a la izquierda de los elementos secundarios

Tengo X número de imágenes (todas de la misma altura y anchura), y quiero mostrarlas en una página web. Pero quiero hacer que la página muestre automáticamente el número máximo de imágenes en una fila (sin cambiar el tamaño de las imágenes) cuando se cambia el tamaño del navegador, y mostrar las imágenes a una distancia fija entre sí.

También las imágenes deben agruparse en el centro de la página, y mostrarse una tras otra.

E. g. Cuando la ventana del navegador solo es lo suficientemente amplia como para mostrar 3 imágenes en una fila, deben mostrarse de la siguiente manera.

3 imágenes por fila agrupadas a una distancia fija, en el centro de la página, una tras otra. introduzca la descripción de la imagen aquí

Y si el navegador se hace más ancho para que se puedan mostrar 4 imágenes en una fila, deben mostrarse así.

4 imágenes por fila (sin redimensionar las imágenes), agrupadas a una distancia fija, en el centro de la página, una tras otra. introduzca la descripción de la imagen aquí

Hasta ahora he escrito el siguiente código:

HTML

<div class="outer-div">
    <div class="inner-div">
        <div class="image-div"><img src="images/1.png"></div>
        <div class="image-div"><img src="images/2.png"></div>
        <div class="image-div"><img src="images/3.png"></div>
        <div class="image-div"><img src="images/4.png"></div>
        <div class="image-div"><img src="images/5.png"></div>
    </div>
</div>

CSS

img {
    height: 200px;
    width: 200px;
    padding: 10px;
}

.image-div {
    display: inline;
}

.outer-div {
    text-align: center;
    width: 100%;
}

.inner-div {
    text-align: left;
    display: inline;
}

Así que las imágenes se muestran en línea con un relleno de 10px dentro de un div (inner-div) que luego se centra dentro del div exterior. Y las imágenes están alineadas con texto a la izquierda dentro del div interior.

Pero el problema es que se muestran de la siguiente manera:

introduzca la descripción de la imagen aquí

Y como sigue cuando el navegador se hace más ancho introduzca la descripción de la imagen aquí

Puede alguien por favor muéstrame cómo mostrar las imágenes como el primer conjunto de imágenes?

Es decir, Número máximo de imágenes por fila (sin redimensionar las imágenes), una tras otra, agrupadas en el centro de la página, a distancia fija (envueltas).

Author: Community, 2015-10-18
Source

10 answers

No hay una manera fácil de lograr el diseño con CSS simple que yo sepa. El siguiente enfoque utiliza media queries para establecer el ancho de los divs internos para diferentes tamaños de viewport.

Considere usar Javascript si tiene un número bastante grande de elementos, los preprocesadores CSS también podrían ser útiles.

Ver fragmento de código y comentarios en línea, también echa un vistazo a la ejemplo de jsfiddle para pruebas fáciles.

body {
    margin: 10px 0;
}
.outer {
    text-align: center;
}
.inner {
    font-size: 0; /* fix for inline gaps */
    display: inline-block;
    text-align: left;
}
.item {
    font-size: 16px; /* reset font size */
    display: inline-block;
    margin: 5px; /* gutter */
}
.item img {
    vertical-align: top;
}
@media (max-width: 551px) { /* ((100+5+5)x5)+1 */
    .inner {
        width: 440px; /* (100+5+5)x4 */
    }
}
@media (max-width: 441px) {
    .inner {
        width: 330px;
    }
}
@media (max-width: 331px) {
    .inner {
        width: 220px;
    }
}
@media (max-width: 221px) {
    .inner {
        width: 110px;
    }
}
<div class="outer">
    <div class="inner">
        <div class="item"><img src="//dummyimage.com/100"></div>
        <div class="item"><img src="//dummyimage.com/100"></div>
        <div class="item"><img src="//dummyimage.com/100"></div>
        <div class="item"><img src="//dummyimage.com/100"></div>
        <div class="item"><img src="//dummyimage.com/100"></div>
    </div>
</div>
 11
Author: Stickers,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-10-30 18:43:46

Número máximo de imágenes por fila (sin redimensionar las imágenes), una tras otra, agrupadas en el centro de la página, a distancia fija (envueltas).

Esa fue una muy buena pregunta. Parece muy simple al principio, pero el resultado óptimo es difícil de lograr.

Realmente no creo que haya una manera de lograr el comportamiento esperado sin usar media queries.

Sin embargo, haciendo uso de algunas consultas de medios y sabiendo exactamente el ancho de las imágenes y el máximo número posible de imágenes por fila podemos resolver el problema usando propiedades basadas en display: inline-*.

Mostrar: bloque en línea

Debe soportar navegadores antiguos, ya que está alrededor desde CSS2. Tenemos que usar un pequeño truco para evitar la representación de un espacio en blanco no deseado entre los elementos.

El truco es establecer la propiedad CSS font-size: 0.

Pantalla: inline-flex

Esto la solución hace uso del CSS flexbox y es una buena opción para los browers modernos.

Visualización: inline-table

Soportado desde CSS2 también y no se necesitan trucos para que funcione.

Mostrar: inline

El resultado final no es el esperado por el autor, ya que los elementos de la segunda fila estarán alineados al centro y no a la izquierda. La parte buena de esta solución es que funcionará sin previo conocimiento del ancho de imagen y media queries.

.wrapper {
  text-align: center;
}
.inline {
  font-size: 0;
  display: inline;
}
.inline-block {
  display: inline-block;
  font-size: 0;
  text-align: left;
}
.inline-flex {
  display: inline-flex;
  flex-wrap: wrap;
}
.inline-table {
  display: inline-table;
  text-align: left;
}
.item {
  margin: 10px;
}
@media (max-width: 240px) {
  .inline-block,
  .inline-flex,
  .inline-table {
    width: 120px;
  }
}
@media (min-width: 241px) and (max-width: 360px) {
  .inline-block,
  .inline-flex,
  .inline-table {
    width: 240px;
  }
}
@media (min-width: 361px) and (max-width: 480px) {
  .inline-block,
  .inline-flex,
  .inline-table {
    width: 360px;
  }
}
@media (min-width: 481px) and (max-width: 600px) {
  .inline-block,
  .inline-flex,
  .inline-table {
    width: 480px;
  }
}
@media (min-width: 601px) and (max-width: 720px) {
  .inline-block,
  .inline-flex,
  .inline-table {
    width: 600px;
  }
}
@media (min-width: 721px) and (max-width: 840px) {
  .inline-block,
  .inline-flex,
  .inline-table {
    width: 720px;
  }
}
<h1>display: inline-block</h1>

<div class="wrapper">

  <div class="inline-block">

    <img class="item" src="http://dummyimage.com/100">

    <img class="item" src="http://dummyimage.com/100">

    <img class="item" src="http://dummyimage.com/100">

    <img class="item" src="http://dummyimage.com/100">

    <img class="item" src="http://dummyimage.com/100">

    <img class="item" src="http://dummyimage.com/100">

  </div>

</div>

<h1>display: inline-flex</h1>

<div class="wrapper">

  <div class="inline-flex">

    <img class="item" src="http://dummyimage.com/100">

    <img class="item" src="http://dummyimage.com/100">

    <img class="item" src="http://dummyimage.com/100">

    <img class="item" src="http://dummyimage.com/100">

    <img class="item" src="http://dummyimage.com/100">

    <img class="item" src="http://dummyimage.com/100">

  </div>

</div>

<h1>display: inline-table</h1>

<div class="wrapper">

  <div class="inline-table">

    <img class="item" src="http://dummyimage.com/100">

    <img class="item" src="http://dummyimage.com/100">

    <img class="item" src="http://dummyimage.com/100">

    <img class="item" src="http://dummyimage.com/100">

    <img class="item" src="http://dummyimage.com/100">

    <img class="item" src="http://dummyimage.com/100">

  </div>

</div>

<h1>display: inline</h1>

<div class="wrapper">

  <div class="inline">

    <img class="item" src="http://dummyimage.com/100">

    <img class="item" src="http://dummyimage.com/100">

    <img class="item" src="http://dummyimage.com/100">

    <img class="item" src="http://dummyimage.com/100">

    <img class="item" src="http://dummyimage.com/100">

    <img class="item" src="http://dummyimage.com/100">

  </div>

</div>
 9
Author: Romulo,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-10-28 02:49:43

Aquí hay una solución genérica que puede funcionar para usted y otros.

HTML

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

CSS

ul {
    margin: 0 auto;              /* center container */
    width: 1000px;
    padding-left: 0;             /* remove list padding */
    list-style-type: none;
    font-size: 0;                /* remove inline-block white space;
                                    see https://stackoverflow.com/a/32801275/3597276 */
}

li {
    display: inline-block;
    font-size: 60px;             /* restore font size removed in container */
    width: 150px;
    height: 150px;
    padding: 5px;
    margin: 15px 25px;
    box-sizing: border-box;
    text-align: center;
    line-height: 150px;
}

@media screen and (max-width: 430px) { ul { width: 200px; } }
@media screen and (min-width: 431px) and (max-width: 630px) { ul { width: 400px; } }
@media screen and (min-width: 631px) and (max-width: 830px) { ul { width: 600px;  } }
@media screen and (min-width: 831px) and (max-width: 1030px) { ul { width: 800px; } }

DEMO

Re: Flexbox: Aunque flexbox es una herramienta increíble, no es la mejor solución para este problema en particular. Explico mi razonamiento aquí: Cómo centrar un contenedor flex pero alinear a la izquierda elementos flex

 6
Author: Michael_B,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-05-23 10:30:08

Creo, dada la multitud de posibilidades CSS, que esta es una solución bastante elegante y multiusos con un código mínimo.

El fragmento de código a continuación contiene todo el CSS necesario, y viene con comentarios extensos. Es mejor ejecutarlo en modo 'página completa'. Inicialmente cambie el tamaño de su navegador hasta que' rcb 1 ' tenga 6 columnas. A continuación, comience a desplazarse y cambiar el tamaño para ver los diversos efectos.

A primera vista puede que no te des cuenta, pero este simple código tiene mucho potencial como galería, tira de película, scrollbox (tanto vertical como horizontal), etc.

Aunque tal vez no sea una solución al 100% de la pregunta, ¡estoy bastante satisfecho con el resultado!

Por favor, eche un buen vistazo y dé su apreciado comentario!

-Anexo - : esta solución ha sido probada para trabajar con:

  • Android 5+: navegador predeterminado
  • Windows7-x32: Google Chrome (46+), Firefox (41+), Firefox DE (43+) y IE11 +

ACTUALIZACIÓN 11/20/15 Algunas modificaciones de código, ver comentarios. 

/* A few initial globals I always use */
html, body           { box-sizing: border-box; height: 100%; width: 100%; 
                       margin: 0; padding: 0; border: 0; cursor: default }
*, *:before, *:after { box-sizing: inherit }
body                 { max-width: 100%; margin: 0 auto }


/*******************************/
/*     The important code      */
/*******************************/
.rcb { /* [MANDATORY] Main Responsive Component Box container */ 
    overflow-x: hidden; /* Content wraps vertically, no horizontal scollbar needed */
    overflow-y: auto;   /* Vertical scrollbar when needed */
    width: 100%;        /* Maximum width within parent element */
    height: auto;       /* Adjust height to child element needs */
    padding: 15px       /* Needed to get from under autohide IE scrollbar, check difference with FF/Ch */
}
.rcb-cmp-list { /* [MANDATORY] Component list, direct child of RCB, controls the flexbox behaviour */
    display: flex;      /* make element a flexible layout container */
    flex-wrap: wrap;    /* a row of N columns, wrapping within frame*/
}
.rcb-cmp-item { /* [RECOMMENDED] RCB component list item, default RCB influences flexbox behaviour of parent list */
    flex: 1 1;          /* add auto or 0, or add some min required width (fiddle away!) */
    min-width:  165px;  /* best value is a multiple or division of 330px for all types of devices */
    max-width:  100%;   /* don't make this too small, leave as is or make it a multiple of min-width */
    max-height: 100%;   /* ditto */
    min-height: auto;   /* override if you want to set minimum; interacts with flex-basis! */
    overflow: hidden;   /* Chop off outside content */
    margin: 8px         /* some space between the boxes */
}
.rcb-cmp-item img {
    display: block }    /*  -Add 11/20/15 - remove the gap below image elements 
                           (by default, IMG is an inline element and causes bottom space) */

.rcb-cmp-item-cnt > * { /* [OPTIONAL] RCB component list content container, fully occupies parent  */
    min-width: 100%;    /* min/max 100% makes sizes fixed to parent */    
    max-width: 100%
}

/* [OPTIONAL] Media Queries to keep box sizes within reasonable limits (corrected for 8px margin) */
@media all and (min-width:  721px)  { .rcb-cmp-item { max-width: calc(33% - 16px) } }
@media all and (min-width:  991px)  { .rcb-cmp-item { max-width: calc(25% - 16px) } }
@media all and (min-width: 1321px)  { .rcb-cmp-item { max-width: calc(20% - 16px) } }

/*******************************/
/* That's it, the rest is demo */
/*******************************/

/* which you can replace with your own */
body                    { font-family: Lato; background-color: rgba(96,125,139,1); /* bluegrey 500*/
                          color: rgba(255,255,255,.87); font-size: 1vmax; line-height: 1.3vmax; }
h3,        
.rcb-cmp-list h4        { text-align: center }

.rcb-cmp-item           { background-color: #ffc107;
                          color: rgba(0,0,0,.87)  /* amber 500 */;
                          padding: 4px; /* -update 11/20/15 - see add of ".rcb-cmp-item img" */
                          border-radius: 2px }
.rcb-cmp-item,
.rcb-cmp-item p img     { box-shadow: 0px 2px 2px  0px rgba(0, 0, 0, 0.14), 
                                      0px 3px 1px -2px rgba(0, 0, 0, 0.20),
                                      0px 1px 5px  0px rgba(0, 0, 0, 0.12) }

.rcb-cmp-item p img     { vertical-align: middle }
.rcb-cmp-item p         { font-weight: 400; letter-spacing: 0 }

.rcb-cmp-item iframe    { border: none }
<h3>rcb 1</h3>
    <div id="rcb-control-1" class="rcb">
        <div class="rcb-cmp-list">
            <h4 class="rcb-cmp-item">200x200 rectangles</h4>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/200"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/200"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/200"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/200"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/200"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/200"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/200"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/200"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/200"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/200"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/200"></div></div>
    
            <h4 class="rcb-cmp-item">odd sized rectangles</h4>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/100"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/200"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/300"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/400"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/500"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/100"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/200"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/300"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/400"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/500"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/100"></div></div>
        </div>
    </div>

    <h3>rcb 2</h3>
    <div id="rcb-control-2" class="rcb">
        <div class="rcb-cmp-list">
            <h4 class="rcb-cmp-item">300x150 oblongs</h4>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/300x150"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/300x150"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/300x150"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/300x150"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/300x150"></div></div>
    
            <h4 class="rcb-cmp-item">odd sized  oblongs</h4>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/100x50"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/200x100"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/300x150"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/400x200"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/500x250"></div></div>
        </div>
    </div>
    
    <h3>rcb 3</h3>
    <div id="rcb-control-3" class="rcb">
        <div class="rcb-cmp-list">
            <h4 class="rcb-cmp-item">portrait 9:16</h4>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/180x320"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/180x320"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/180x320"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/180x320"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/180x320"></div></div>
    
            <h4 class="rcb-cmp-item">landscape 16:9</h4>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/320x180"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/320x180"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/320x180"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/320x180"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/320x180"></div></div>
    
            <h4 class="rcb-cmp-item">mixed 16:9 - 9:16</h4>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/180x320"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/320x180"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/180x320"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/180x320"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/320x180"></div></div>
        </div>
    </div>
    
    <h3>rcb 4</h3>
    <div id="rcb-control-4" class="rcb">
        <div class="rcb-cmp-list">
            <h4 class="rcb-cmp-item">odd ones out</h4>
            <div class="rcb-cmp-item">empty rcb-cmp</div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt">empty rcb-cmp-item-cnt</div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><p>While I used a few oddly shaped images in this demo, on average most images will have ratio 3:2, 4:3 or 16:9</p></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/100x200"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><iframe src="http://www.youtube.com/embed/XGSy3_Czz8k?autoplay=0"></iframe><h4>live media</h4></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/200x300"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt">this is some text div with a <a href="javascript:void(0)">clickable anchor</a></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/320x200"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/400x300"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><p>this is some paragraph with a <a href="javascript:void(0)">clickable anchor</a> and a tiny image <img src="http://dummyimage.com/35"> somewhere inside</p></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/100x150"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/200x100"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/300x320"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/200"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/200"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/400x100"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/257x133"></div></div>
        </div>
    </div>
 1
Author: Rene van der Lende,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-11-20 23:39:15

No es necesario hacer ningún trabajo complejo aquí, solo poner !importante

.outer-div {
    text-align: center;
    width: 100%;
}

.inner-div {
    text-align: left !important;
    display: inline;
}

" !importante " funcionará en esta situación

 0
Author: Navaj Mulla,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-10-29 11:44:40

No tengo tiempo para mejorar lo que sigue, pero, espero que pueda ayudarle de alguna manera! Muchos casos están cubiertos! Utilice Flexbox si está buscando una solución PureCSS!

.flex-container {
    display: -ms-inline-flexbox;
    display: -webkit-inline-flex;
    display: inline-flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-content: flex-start;
    -ms-flex-line-pack: start;
    align-content: flex-start;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
}

.flex-item {
    -webkit-flex: 0 1 auto;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    -webkit-align-self: auto;
    -ms-flex-item-align: auto;
    align-self: auto;
}
.flex-item:last-child { margin-right: auto }


/** IGNORE FOLLOWING **/
.flex-container {
  padding: 1em;
  border: 1px solid black;
  margin: 0 0 1em 0;
}
.box {
  width: 100px;
  height: 100px;
  visibility: visible;
  margin: 15px;
}

.size-lg { width: 90% }
.size-sm { width: 60% }
.size-xs { width: 40% }

.size-lg .box { background-color: yellow; }
.size-sm .box { background-color: yellow; }
.size-xs .box { background-color: yellow; }
<div class="flex-container size-lg">
  
  <div class="flex-item box"></div>
  <div class="flex-item box"></div>
  <div class="flex-item box"></div>
  <div class="flex-item box"></div>
  <div class="flex-item box"></div>
  <div class="flex-item box"></div>
  <div class="flex-item box"></div>
  <div class="flex-item box"></div>
  <div class="flex-item box"></div>
  <div class="flex-item box"></div>
  <div class="flex-item box"></div>
  
</div>

<div class="flex-container size-sm">
  
  <div class="flex-item box"></div>
  <div class="flex-item box"></div>
  <div class="flex-item box"></div>
  <div class="flex-item box"></div>
  <div class="flex-item box"></div>
  <div class="flex-item box"></div>
  <div class="flex-item box"></div>
  <div class="flex-item box"></div>
  <div class="flex-item box"></div>
  <div class="flex-item box"></div>
  <div class="flex-item box"></div>
  
</div>

<div class="flex-container size-xs">
  
  <div class="flex-item box"></div>
  <div class="flex-item box"></div>
  <div class="flex-item box"></div>
  <div class="flex-item box"></div>
  <div class="flex-item box"></div>
  <div class="flex-item box"></div>
  <div class="flex-item box"></div>
  <div class="flex-item box"></div>
  <div class="flex-item box"></div>
  <div class="flex-item box"></div>
  <div class="flex-item box"></div>
  
</div>
 0
Author: Hitmands,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-10-29 13:20:31

Creo que tengo una solución.

Tratando a .inner como un bloque en línea, puede usar text-align: center para mantener el grupo de elementos en medio de un div de ancho 100%. Que se reduce muy bien.

.outer {
    width: 100%;
    text-align: center;
}

.inner {
    display: inline-block;
}

.item {
    display: inline-block;
    float: left;
    margin: 5px;
    width: 100px;
    height: 100px;
}

Get'fiddle wit it: http://jsfiddle.net/sLz2ok92/2 /

 -1
Author: Will Thresher,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-10-29 12:56:30

Solo puedes agregar float: left; a .image-div clase 

.image-div {
    display: inline;
    float:left;
}

Ejemplo: https://jsfiddle.net/czdwkxq7/

 -2
Author: Yuriy Yakym,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-10-17 23:42:04 

body {
    margin: 10px 0;
}

.outer {
    text-align: left;
    width:90%;
    margin:auto;
    
}
.inner {
    font-size: 0; /* fix for gaps */
    display: inline-block;
    text-align: left;
}
.item {
    font-size: 16px; /* reset size */
    display: inline-block;
    margin: 5px; /* gutter */
    height:100px;
    width:100px;
    background:yellow;
}
<div class="outer">
    <div class="inner">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        
    </div>
</div>
 -2
Author: Mitul,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-10-23 03:38:18

Para lograr esto necesita usar inline-block. Aquí hay una buena guía para ello: http://learnlayout.com/inline-block.html

Y he hecho un codepen que es un poco como su proyecto aquí: http://codepen.io/noxlux/pen/rOYYdW

body {
background: cadetblue;
}
.outer {
  padding: 3%;
}
.inner {
  background: aliceblue;
  padding: 1%;
}
.square {
  height: 100px;
  width: 100px;
  padding: 10px;
  margin: 10px;
  background: firebrick;
  display: inline-block;
}


<div class="outer">
  <div class="inner">
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
  </div>
</div>
 -4
Author: noxlux,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-10-18 00:44:42