[英]Center A Grid Of Thumbnails Within Responsive Container
I have dynamically generated thumbnails that will be inserted inside a container of fluid width. 我已经动态生成了缩略图,这些缩略图将插入到流体宽度容器中。 The thumbnails will have a set width/height of 150px and a margin of 5px. 缩略图的宽度/高度设置为150px,边距为5px。 I want the tiles to be horizontally centered within the container, but I want each tile to line up below each other to form a grid. 我希望这些图块在容器内水平居中,但我希望每个图块在彼此下方排列以形成网格。
I have written the following code but I am unable to get the thumbnails to be centered within the container. 我已经编写了以下代码,但是我无法使缩略图在容器中居中。 If I remove the float:left;
如果我删除float:left;
, the thumbnails will be centered but the thumbnails are no longer lined up below each other to form a grid. ,缩略图将居中,但缩略图不再彼此下方对齐以形成网格。
How would I modify the CSS to achieve a grid of thumbnails that are centered within a container of fluid width? 如何修改CSS,以使缩略图网格位于流体宽度容器的中心?
https://jsfiddle.net/bL7kfq5s/ 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;
}
please replace .thumb with this code 请用此代码替换.thumb
.thumb {
display: inline-block;
float: none;
margin: 0 5px 5px;
width: 150px;
}
You can use a sub-wrapper whose width you can set relative to your main wrapper, and float the thumbs within the sub as below: 您可以使用一个子包装器,其宽度可以相对于主包装器设置,然后将拇指浮动在子包装器中,如下所示:
<div class="wrapper">
<div class="subwrapper">
<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>
.subwrapper {
width: 480px;
margin: auto;
}
https://jsfiddle.net/45sosd29/ https://jsfiddle.net/45sosd29/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.