Центр оправдывает динамические изображения

Question

У меня есть контейнер с фиксированной шириной, в котором я загружаю фиксированные изображения высоты (ширина - авто), динамически - с использованием ajax. Я сделал каждое изображение плавающим влево. Проблема в том, что если новое изображение не вписывается в текущую строку, оно пропускает эту строку в следующую, образуя отрицательное пространство в исходной строке. Итак, я хотел бы, чтобы все мои изображения были выровнены посередине, например, выравнивание по центру в офисе MS. Как я могу это сделать, решения jQuery также приветствуются.

---

ADD ON:

Хорошо, я использую this file upload plugin. Когда я выбираю несколько изображений для загрузки, эти изображения помещаются в контейнер div (.file-preview-thumbnails), и они выглядят как плавающие слева. Теперь я хотел бы, чтобы они были центрированы, как показано на приведенной выше диаграмме. Как я могу это сделать?

Вот моя скрипка: https://jsfiddle.net/0uwLd8rj/

Answer 1

text-align: center центры изображений в каждой строке.

padding: 5px обеспечивает небольшое пространство между изображениями для лучшего внешнего вида.

#container { 
 
    display: inline-block; 
 
    width: 700px; 
 
    background-color: #f0f0f0; 
 
    border: solid 1px gray; 
 
    text-align: center; 
 
} 
 
#container img { 
 
    padding: 5px; 
 
}

<div id='container'> 
 
    <img src='http://i.kinja-img.com/gawker-media/image/upload/s--2mI-K7Az--/bjtilnpurih2mbpxqaxz.jpg' /> 
 
    <img src='http://i.ytimg.com/vi/qVdh0wel-Yo/mqdefault.jpg' /> 
 
    <img src='https://lh5.ggpht.com/KkTRxLuiXd_PXv-YePcJNXdvFFhCu9QxpCNEZraghdaaFjeExzQQTiodGYKXBev9IkI=w300' /> 
 
    <img src='http://www.ltwmag.com/images/_Dec_news_images/annoyingorange260.gif' /> 
 
    <img src='http://upload.wikimedia.org/wikipedia/en/5/5f/Annoying_Orange_Kicthen_Carange_icon_175x175.png' /> 
 
</div>