石積みアイテムを列にセンタリング

Question

私はMasonry v3.1.2に問題があります。 サムネイルの一部を私のレイアウト上の他のサムネイルよりも小さくしたいと思います。

私は400ピクセルに列の最大幅を設定しているが、時々私はいくつかの画像は小さくしたいのですが、（すなわち300ピクセル）

現在の画像は左側に揃えるが、私は彼らがなりたいです列の中央に配置されています。 小さな画像の中央をどのように中心に合わせることができますか？

これはコードです：

<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