我正在尝试让一组图形标签在 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;
}
提前致谢
最佳答案
你可以使用 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>
关于html - 在 div 内居中的一组图形,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39287852/