中心证明动态图像

Question

我有一个固定宽度的容器div，我在其中加载固定高度图像（宽度为自动），动态 - 使用ajax 。我让每个图像浮动到左边。问题是，如果新图像不适合当前行，它会跳过该行进入下一行，在原始行中形成负空间。所以，我希望我的所有图像都在中间对齐，就像MS办公室中心对齐一样。我怎么能这样做，jQuery解决方案也是受欢迎的。

---

ADD ON：

好的，我正在使用this file upload plugin。当我选择要上传的多个图像时，这些图像会被放入容器div（.file-preview-thumbnails）中，它们会向左浮动，现在我希望它们居中，如上图所示。我怎么能这样做？

这是我的小提琴：https://jsfiddle.net/0uwLd8rj/

Answer 1

text-align: center将图像置于每一行的中心位置。

padding: 5px在图像之间留出一点空间，以便更好看。

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;