砌筑中心图像

Question

我正在使用masonry将我的图片很好地放在这样的大屏幕上：

 <div class="grid"  >
    <div class="grid-item"><img class='link img-link' src="images/image1.gif"></div>
    <div class="grid-item"><img class='link img-link' src="images/image2.gif"></div>
    <div class="grid-item"><img class='link img-link' src="images/image3.gif"></div>
  </div>

以及以下jQuery剪切

$(document).ready(function(){
      $('.grid').masonry({
        columnWidth: 1,
        itemSelector: '.grid-item'
      });
});

然而，使用手机时不需要很好的放置。 目前，在移动屏幕上，图像不是居中的，而是全部左对齐。将text-align:center设为grid或grid-item无济于事。 如果图像全部列在下面，我该如何将图像居中？

问题可以在http://www.kristianhammerstad.com/

看到

这就是我的情况：

Answer 1

您应该找到要应用规则的像素，并使用以下内容：
例如，如果您想要360像素及以下：请在您的css文件中使用以下代码：

@media screen and (max-width: 360px) {
    .box.col3.editorial , .box.col3.poster{
             left: 0;
             right: 0;
             margin: 0 auto;
    }
}

Answer 2

.masonry_item {
  width:300px;
  margin:0 auto 20px auto;
  padding:20px;
}

再次尝试此链接： - How to Center Masonry Container