Масонство - как остановить масонство плавает все мои элементы сетки слева?

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>