html - 在响应容器中居中缩略图网格

Question

我有动态生成的缩略图，这些缩略图将被插入到一个宽度可变的容器中。缩略图的宽度/高度设置为 150 像素，边距为 5 像素。我希望图 block 在容器内水平居中，但我希望每个图 block 在彼此下方排列以形成网格。

我已经编写了以下代码，但我无法让缩略图在容器内居中。如果我删除 float:left;，缩略图将居中，但缩略图不再在彼此下方排列以形成网格。

我将如何修改 CSS 以获得在宽度可变的容器内居中的缩略图网格？

https://jsfiddle.net/bL7kfq5s/

<div class="wrapper">
  <div class="thumb"><img src="http://www.placehold.it/150x150"></div>
  <div class="thumb"><img src="http://www.placehold.it/150x150"></div>
  <div class="thumb"><img src="http://www.placehold.it/150x150"></div>
  <div class="thumb"><img src="http://www.placehold.it/150x150"></div>
  <div class="thumb"><img src="http://www.placehold.it/150x150"></div>
</div>

.wrapper {
  width: 600px; /* responsive width */
  background: yellow;
  text-align: center;
  overflow: hidden;
}

.thumb {
  display: inline;
  float: left;
  margin: 0 5px 5px;
  width: 150px;
}

Answer 1

请用这段代码替换.thumb

.thumb {
    display: inline-block;
    float: none;
    margin: 0 5px 5px;
    width: 150px;
}