如何使响应式网格居中答案

【问题标题】：How to center responsive grid如何使响应式网格居中
【发布时间】：2016-04-20 03:25:27
【问题描述】：

我正在尝试使用图像网格构建一个页面（全部为 300 像素 x 300 像素）。调整大小时：图片大小不变，但每行多余的图片会下降到下一行。

我现在在 JSFiddle 上的内容： https://jsfiddle.net/xixi/w4xx9y33/

它工作得很好，但我真的很想让网格始终居中，而不是左对齐。就像 Pinterest.com 上的 pin 网格一样

提前感谢您的帮助！

<body>
  <div class="grid">
    <div class="grid_item"><img src="https://www.dropbox.com/s/rhuivuugas64swf/test.jpg?dl=0"></div>
    <div class="grid_item"><img src="https://www.dropbox.com/s/rhuivuugas64swf/test.jpg?dl=0"></div>
    <div class="grid_item"><img src="https://www.dropbox.com/s/rhuivuugas64swf/test.jpg?dl=0"></div>
    <div class="grid_item"><img src="https://www.dropbox.com/s/rhuivuugas64swf/test.jpg?dl=0"></div>
    <div class="grid_item"><img src="https://www.dropbox.com/s/rhuivuugas64swf/test.jpg?dl=0"></div>
    <div class="grid_item"><img src="https://www.dropbox.com/s/rhuivuugas64swf/test.jpg?dl=0"></div>
    <div class="grid_item"><img src="https://www.dropbox.com/s/rhuivuugas64swf/test.jpg?dl=0"></div>
    <div class="grid_item"><img src="https://www.dropbox.com/s/rhuivuugas64swf/test.jpg?dl=0"></div>
    <div class="grid_item"><img src="https://www.dropbox.com/s/rhuivuugas64swf/test.jpg?dl=0"></div>
    <div class="grid_item"><img src="https://www.dropbox.com/s/rhuivuugas64swf/test.jpg?dl=0"></div>
    <div class="grid_item"><img src="https://www.dropbox.com/s/rhuivuugas64swf/test.jpg?dl=0"></div>
    <div class="grid_item"><img src="https://www.dropbox.com/s/rhuivuugas64swf/test.jpg?dl=0"></div>
  </div>
</body>

【问题讨论】：

标签： css web grid center responsive

【解决方案1】：

试试这个：

.grid_item {
    @include rowMachine(1, 10%);
    display: inline-block;
    background: none;
    padding: 10px;
    position: relative;

    @media (min-width: 500px) {
        @include rowMachine(2, 5%);
        float: left;
    }
...

其余部分保持原样。

注意：如果您需要 IE7 支持，您可能会遇到块上的 inline-block 问题。

【讨论】：

似乎在此处居中：jsfiddle.net/w4xx9y33/4 否则我建议您使用 CSS 框架，如 Bootstrap 或 Foundation。您可以更轻松地管理响应式网格。 foundation.zurb.com/sites/docs/grid.html

【解决方案2】：

可能使用 flexbox 技术来实现你想要的。

查看以下参考页面

http://www.sitepoint.com/using-modern-css-to-build-a-responsive-image-grid/

https://css-tricks.com/seamless-responsive-photo-grid/

【讨论】：

嗨 ShanthoshK，在这两个示例中，图像都会随着窗口大小的调整而调整 - 这不是我正在寻找的行为。同样在这两个示例中，网格都是居中的。它们都是左对齐的。
我猜，Bootstrap 和 Zurb 基金会最新版本都使用了 FlexBox 技术。我已经建议新兴的简单 CSS 技术来避免使用 CSS 框架来满足小需求。这取决于你。