jquery - 中心对齐动态图像

Question

我有一个固定宽度的容器 div，我在其中加载固定高度的图像(宽度是自动的)，动态地-使用 ajax。我让每张图片都向左浮动。问题是，如果新图像不适合当前行，它会跳过该行进入下一行，从而在原始行中形成一个负空间。所以，我希望我所有的图像都居中对齐，就像 MS Office 中的居中对齐一样。我该怎么做，也欢迎使用 jQuery 解决方案。

---

添加:

好的，我正在使用 this file upload plugin .当我选择多张图片上传时，这些图片被放入容器 div (.file-preview-thumbnails) 并且它们有点向左浮动，现在我想它们居中，如上图所示。我该怎么做？

这是我的 fiddle :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>