Question

我试图让一组图形标签居中在div标签内。我设置了一个小提琴来展示我的经历。我将会有20多个这样的，并且看起来不是很好，一边的边距比另一边大。我所看到的所有内容都显示为将子项设置为显示：内联块和父项为text-align：center，但这对我不起作用，因此它们不在小提琴中。

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/）：

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

一组数字集中在div内

1 个答案: