Question

我遇到了Masonry v3.1.2的问题。我想在我的布局上让一些缩略图小于其他缩略图。

我已将列的最大宽度设置为400px，但有时我想让一些图像变小（即300px）

目前图像与左侧对齐，但我希望它们在列中居中。如何将较小的图像居中在列的中心？

这是代码：

    <script type="text/javascript" charset="utf-8">
    var msnry = new Masonry( container, {
      itemSelector: '.item',
        columnWidth: 350,
        "isFitWidth": true
    });
</script>

<div id="mansory-container"  data-masonry-options='{}'>
    <div class="item center">
        <a href="<?=base_url()?>projects_detail/<?=$row->documents_url?>">
            <img src="example.jpg" alt="my image" class="documents-image" />
        </a>
    </div>
</div>

<style type="text/css" media="screen">
#mansory-container{max-width:950% !important;}
.item{max-width:350px !important;margin:20px auto !important;/*position:relative !important;*/}
.documents-image{/*max-width:350px;*/}      
</style>

Answer 1

你需要像这样集中容器：

#mansory-container{
  max-width:950% !important;
  margin: 0 auto; // <-- added
}

Here's a codepen showing it works

将砌体项目置于列中

1 个答案: