Center Container For Jquery Packery?

Question

I use JQuery Packery which works fine. The question that occurs to me is how can I center the item container on my page?

...&l

Solution 1:

DeSandro already has an example of a centered packery layout.

The example is here.

Basically it is just centered via CSS. I'm copying the code here too:

HTML:

<h1>Packery - centered</h1><divclass="packery js-packery"data-packery-options='{ "gutter": ".gutter-sizer", "itemSelector": ".item", "columnWidth": ".grid-sizer" }'><divclass="gutter-sizer"></div><divclass="grid-sizer"></div><divclass="item w2"></div><divclass="item"></div><divclass="item w2 h2"></div><divclass="item"></div><divclass="item w2"></div><divclass="item"></div><divclass="item h2"></div><divclass="item"></div><divclass="item h2"></div><divclass="item"></div><divclass="item"></div><divclass="item"></div><divclass="item h2"></div><divclass="item"></div><divclass="item"></div></div>

CSS:

Baca Juga

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

.packery {
  background: #FDD;
  background: hsla(45, 100%, 40%, 0.2);
  max-width: 480px;
  margin: 0 auto;
}

/* clearfix */.packery:after {
  content: ' ';
  display: block;
  clear: both;
}

.gutter-sizer {
  width: 2%;
}

.grid-sizer {
  width: 18.4%;
}

.item {
  width: 18.4%;
  height: 60px;
  float: left;
  background: #C09;
  border: 4px solid #333;
  border-color: hsla(0, 0%, 0%, 0.3);
}

.item.w2 { width: 38.8%; background: #9C0; }
.item.h2 { height: 120px; background: #0C9; }

Solution 2:

have a look at this.. this does what you need..

http://codepen.io/anon/pen/Dbpzu

javascript spravka

Center Container For Jquery Packery?

Solution 1:

Solution 2:

Post a Comment for "Center Container For Jquery Packery?"