Centre de plusieurs divs dans le parent div en utilisant packery.js

Question

Fiddle

J'ai un div centré à l'aide de la fondation.À l'intérieur de cette div, j'ai 215 x 215 divs qui ont des images de fond du travail que j'ai faites.

J'ai obtenu de l'emballage de travailler juste bien.Mon problème est que je veux centrer ces divs dans leur conteneur.Mais je ne sais jamais combien de divs sera sur une seule rangée, donc je ne peux donc pas leur donner un rembourrage parce que ça va gâcher si l'image que je donne au rembourrage passe à une nouvelle rangée.

Comment puis-je résoudre ce problème?

merci!

Voici mon 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

On dirait que vous voulez que les divs se déroulent comme un texte aligné central.J'ai mis à jour vos styles pour le faire:

#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; }

Et il semble fonctionner dans ce violon: http://jsfiddle.net/fiddlerjason/58qm3/