html - 在 div 内居中的一组图形

Question

我正在尝试让一组图形标签在 div 标签内居中。我设置了一个 fiddle 来展示我的经历。我将有 20 多个这样的东西，而且一侧的边距比另一侧大，看起来不太好。我所看到的一切都表明 child 是 display:inline-block， parent 是 text-align: center，但这对我不起作用，所以他们不在 fiddle 中。

https://jsfiddle.net/8ut3ngpz/

HTML:

<div class="thumbnaildiv">

  <figure class="thumbnailfig">
    <img src="http://i.imgur.com/JCNLYC7.png" alt="Red" class="thumbnail">
    <figcaption class="caption">Red Square</figcaption>
  </figure>

  <figure class="thumbnailfig">
    <img src="http://i.imgur.com/JCNLYC7.png" alt="Red" class="thumbnail">
    <figcaption class="caption">Red Square</figcaption>
  </figure>

  <figure class="thumbnailfig">
    <img src="http://i.imgur.com/JCNLYC7.png" alt="Red" class="thumbnail">
    <figcaption class="caption">Red Square</figcaption>
  </figure>

  <figure class="thumbnailfig">
    <img src="http://i.imgur.com/JCNLYC7.png" alt="Red" class="thumbnail">
    <figcaption class="caption">Red Square</figcaption>
  </figure>

  <figure class="thumbnailfig">
    <img src="http://i.imgur.com/JCNLYC7.png" alt="Red" class="thumbnail">
    <figcaption class="caption">Red Square</figcaption>
  </figure>
</div>

CSS:

.thumbnailfig {
  border: 1px solid #3D75A7;
  max-width: 22.6%;
  float: left;
  margin: 1%;
}

.thumbnail {
  max-width: 90%;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 5%;
  margin-bottom: 5%;
}

.caption {
  text-align: center;
  font-size: 100%;
  color: #ffffff;
}

提前致谢

Answer 1

你可以使用 flexbox 来解决这个问题。在您的示例中，您必须添加 .thumbnaildiv。

代码(https://jsfiddle.net/8ut3ngpz/4/):

.thumbnaildiv {
  display:flex;
  flex-direction:row;
  justify-content:center;
  flex-wrap:wrap;
}
.thumbnailfig {
  border: 1px solid #3D75A7;
  max-width: 22.6%;
  margin: 1%;
}
.thumbnail {
  max-width: 90%;
  display: block;
  margin: 5% auto;
}
.caption {
  text-align:center;
  font-size:100%;
  color:#fff;
}

<div class="thumbnaildiv">
  <figure class="thumbnailfig">
    <img src="http://i.imgur.com/JCNLYC7.png" alt="Red" class="thumbnail">
    <figcaption class="caption">Red Square</figcaption>
  </figure>
  <figure class="thumbnailfig">
    <img src="http://i.imgur.com/JCNLYC7.png" alt="Red" class="thumbnail">
    <figcaption class="caption">Red Square</figcaption>
  </figure>
  <figure class="thumbnailfig">
    <img src="http://i.imgur.com/JCNLYC7.png" alt="Red" class="thumbnail">
    <figcaption class="caption">Red Square</figcaption>
  </figure>
  <figure class="thumbnailfig">
    <img src="http://i.imgur.com/JCNLYC7.png" alt="Red" class="thumbnail">
    <figcaption class="caption">Red Square</figcaption>
  </figure>
  <figure class="thumbnailfig">
    <img src="http://i.imgur.com/JCNLYC7.png" alt="Red" class="thumbnail">
    <figcaption class="caption">Red Square</figcaption>
  </figure>
  <figure class="thumbnailfig">
    <img src="http://i.imgur.com/JCNLYC7.png" alt="Red" class="thumbnail">
    <figcaption class="caption">Red Square</figcaption>
  </figure>
  <figure class="thumbnailfig">
    <img src="http://i.imgur.com/JCNLYC7.png" alt="Red" class="thumbnail">
    <figcaption class="caption">Red Square</figcaption>
  </figure>
</div>