如何在更改屏幕尺寸时自动居中网格的行内容

Question

我正在尝试使用bootstrap和其他css资源构建一个网站，并且我试图在过去两天内修复以下问题，我想我无法修复它

我有一排50张250x250卡，左边距为30px。当我在全屏幕上播放时，我没有遇到任何问题。但是，当我更改屏幕尺寸时，会出现最新卡和屏幕边框之间的巨大差距。这一直持续到浏览器可以使用以下卡填充空白区域。

我不想拥有这个空白空间，并希望卡片自动与中心对齐。

我还将列分为10行，但仍然没有变化。

有没有办法解决这个问题？屏幕截图附加全屏和小屏幕。

您也可以自己查看：http://sagtekin.com/letseat/maintest.php

非常感谢你的宝贵帮助。

Answer 1

1. 您有多次id卡，请使用class。
2. 不要设置列width的{​​{1}}，让bootstrap执行此操作。 （固定尺寸和响应式设计不能很好地混合。）
3. 使用div标记，除非您真的想要在背景中使用图像，然后在其上放置一些尺寸决定了它的内容。

如果您这样做，那么容器将按预期运行。

Answer 2

我不得不说你的代码有点混乱，我鼓励你回过头来引用引导文档以获得正确的语义和结构代码，因为你发生了一堆不必要的事情。

简而言之，您必须使您的包含div已应用text-align: center。我还给出了15px的左右边距以偏移间距并保持居中。

其次要确保您的列类有意义并且在数学上相互适应！我已将您的图片包裹在col-lg-12中并将图片包裹在col-lg-4中，以便至少有3张图片。根据您的需要调整图像大小我制作了较小的图像，这样您就可以更多地看到小提琴的响应性。

.container {
 text-align: center;
}

#card {
background: #FAFAFA;
width: 150px;
height: 150px;
margin-bottom: 30px;
margin-left: 15px;
margin-right: 15px;
overflow: hidden;
display: inline-block;
}

#card h2 {
background-color: #3F51B5;
opacity: 0.9;
text-align: center;
position: absolute;
margin: 0px;
width: 150px;
}

img {
float: left;
}

这是一个小提琴 https://jsfiddle.net/gward90/oygyj9qd/