Come centrare gli oggetti all'interno del contenitore isotopico?

Question

Ho una griglia isotopica con una larghezza non fissa e non so come centrare gli oggetti all'interno del contenitore isotopico.

.box{ 
width: 40px; 
height: 40px; 
background-color: #e74c3c; 
margin: 0 auto; 
} 

che css non centra gli articoli. here è il collegamento al violino che illustra il mio problema.

Come posso fare il centro dei quadrati rossi all'interno della scatola nera?

Answer 1

Il modo più semplice è quello di utilizzare in muratura:

jsFiddle

var $container = $('#container'); 
// init 
$container.isotope({ 
// options 
itemSelector: '.box', 
masonry: { 
columnWidth: 40, 
isFitWidth: true 
} 
}); 

Answer 2

Sembra che ognuno dei tuoi scatole viene assegnato absolute posizionamento in questo modo:

<div class="box" style="position: absolute; left: 0px; top: 0px;"></div> 
<div class="box" style="position: absolute; left: 80px; top: 0px;"></div> 
<div class="box" style="position: absolute; left: 160px; top: 0px;"></div> 
<div class="box" style="position: absolute; left: 240px; top: 0px;"></div> 

Il modo in cui l'ho presa al lavoro è stato quello di avvolgere tutte le caselle in un altro div contenitore, e manipolare il posizionamento relative di che nuovo contenitore come questo (o controllare questo fiddle):

var $container = $('#container'); 
 
// init 
 
$container.isotope({ 
 
    // options 
 
    itemSelector: '.box', 
 
    layoutMode: 'fitRows' 
 
});

#container { 
 
    background-color: #333; 
 
    width: 90%; 
 
    height: auto; 
 
    margin: 0 auto; 
 
    position: relative; 
 
} 
 

 
#boxes-collection { 
 
    position: absolute; 
 
    left: 28%; 
 
    width: 100%; 
 
} 
 

 
.box { 
 
    width: 40px; 
 
    height: 40px; 
 
    background-color: #e74c3c; 
 
    margin: 20px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://squaredoodletest.t15.org/JS/isotpoe.js"></script> 
 
<div id="container"> 
 
    <div id="boxes-collection"> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    </div> 
 
</div>