Centrare i div multipli nel div genitore durante l'utilizzo di packery.js

Question

Fiddle

Ho un div che è centrato usando Fondazione.All'interno di quel div, ho 215 x 215 div che hanno immagini di sfondo del lavoro che ho fatto.

Ho un imballio per lavorare bene.Il mio problema è che voglio centrare questi divs all'interno del loro contenitore.Ma non so mai quanti Divs saranno in una sola riga, quindi non posso semplicemente dare loro imbottitura perché si confonderà se l'immagine che do il riempimento vada in una nuova riga.

Come posso risolvere questo?

Grazie!

Ecco il mio html

<div id="myWork" class="row">
    <div id="container" class="js-packery large-11 large-centered columns" data-packery-options='{ "itemSelector": ".item", "gutter": 20 }'>
        <div class="item" id="abgCapital">

        </div>
        <div class="item" id="voipInnovations">

        </div>
        <div class="item" id="payday">

        </div>
        <div class="item" id="inspira">

        </div>
    </div>
</div>

.

CSS

#myWork {
  margin-top: 30px;
  display: block;
  background-color: orange; }

#container {
  background-color: green; }

.item {
  width: 215px; }

#abgCapital {
  height: 215px;
  width: 215px;
  background-image: url(../img/abg_square_icon.png);
  background-size: cover;
  margin-left: auto;
  margin-right: auto; }

#voipInnovations {
  height: 215px;
  width: 215px;
  background-image: url(../img/vi_square_icon.png);
  background-size: cover; }

#payday {
  height: 215px;
  width: 215px;
  background-image: url(../img/pday_icon_square.png);
  background-size: cover; }

#inspira {
  height: 215px;
  width: 215px;
  background-image: url(../img/insp_square_icon.png);
  background-size: cover; }

.

Answer 1

Sembra che tu voglia che i div si flino come il testo allineato al centro.Ho aggiornato i tuoi stili per farlo:

#container {
  background-color: green;
  text-align: center;
  height: auto !important;
  padding-top: 5px; }

.item {
  width: 215px; 
  position: static !important; 
  display: inline-block; 
  margin-bottom: 5px; }

.

E sembra funzionare in questo violino: http://jsfiddle.net/fiddlerjason/58qm3/