メーソンリー - メーソンリーを停止する方法は、すべての私のグリッドアイテムを左に浮かべますか？

Question

石工グリッドのアイテムを中央に揃えるにはどうすればよいですか？

フリーメーソンの左にすべての私のグリッド項目を浮いたり左にコンテンツを正当化するようだ：

<div class="wrap"> 
    <div class="parent grid"> 
    <div class="grid-item"><div>1</div></div> 
    <div class="grid-item"><div>2</div></div> 
    <div class="grid-item"><div>3</div></div> 
    <div class="grid-item"><div>4</div></div> 
    <div class="grid-item"><div>5</div></div> 
    </div> 
</div> 

CSS：

* { 
    box-sizing: border-box; 
    font-family: Arial, Sans-serif; 
} 

.wrap { 
    background: #FFD54F; 
    text-align: center; 
} 

.parent { 
    text-align: center; 
    width: 600px; 
    display: inline-block; 
    border: 1px solid black; 
} 

.parent > div { 
    width: 200px; 
    height: 100px; 
    background: white; 
    margin:5px; 
    padding:20px; 
    display: inline-block; 
} 

.parent > div > div { 
    font: bold 30px Arial, Sans-serif; 
    color: white; 
    width: 50px; 
    height: 50px; 
    background: #FAB400; 
    border-radius: 50%; 
    padding: 9px; 
    text-align:center; 
} 

jsfiddle

私が達成しようとしている何がありますこれは：

可能でしょうか？

Answer 1

.parentに別のコンテナを追加して、マージンを含む子要素のサイズとちょうど同じ幅を設定し、中央に表示することができます。これをチェック：

.parent { 
    text-align: center; 
    width: 60%; 
    display: inline-block; 

} 
.parent-parent{ 
    width: 60%; 
    border: 1px solid black; 
    margin: 0 auto; 
} 

Sample

Answer 2

最善のことを、私はあなたがこのためにフレックスを使用することができると思います。

このリンクは、フレックスall about flex

については何も変更するためにあなたを助けることがあり、これは私があなたのフィドル

$('.grid').masonry({ 
 
    // options 
 
    itemSelector: '.grid-item', 
 
    percentPosition: true 
 
});

* { 
 
     box-sizing: border-box; 
 
     font-family: Arial, Sans-serif; 
 
    } 
 

 
    .wrap { 
 
     background: #FFD54F; 
 
     display:flex; 
 
     align-items:center; 
 
     justify-content:center; 
 
    } 
 

 
    .parent { 
 
     width:600px; 
 
     border: 1px solid black; 
 
     display:flex; 
 
     flex-direction:row; 
 
     flex-wrap:wrap; 
 
     align-items:center; 
 
     justify-content:center; 
 
    } 
 
    .grid{ 
 
     display:flex; 
 
     flex-direction:column; 
 
     flex-wrap:wrap; 
 
     width:430px; 
 
     height:100%; 
 
    } 
 
    .parent .grid-item { 
 
     width: 200px; 
 
     height: 100px; 
 
     background: white; 
 
     margin:5px; 
 
     padding:20px; 
 
     
 
    } 
 

 
    .grid-item div { 
 
     font: bold 30px Arial, Sans-serif; 
 
     color: white; 
 
     width: 50px; 
 
     height: 50px; 
 
     background: #FAB400; 
 
     border-radius: 50%; 
 
     padding: 9px; 
 
     display:flex; 
 
     align-items:center; 
 
     justify-content:center; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="wrap"> 
 
    <div class="parent"> 
 
    <div class="grid"> 
 
    <div class="grid-item"><div>1</div></div> 
 
    <div class="grid-item"><div>2</div></div> 
 
    <div class="grid-item"><div>3</div></div> 
 
    <div class="grid-item"><div>4</div></div> 
 
    <div class="grid-item"><div>5</div></div> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> 
 

 
<script src="https://npmcdn.com/masonry-layout@4.0/dist/masonry.pkgd.min.js"></script>