Контейнер центра для упаковки JQuery?

Question

Я использую JQuery Packery, который отлично работает.

Вопрос, который возникает у меня, - это как я могу сосредоточить контейнер товаров на своей странице?

<div id="container"> 
    <div class="item">...</div> 
    <div class="item w2">...</div> 
    <div class="item">...</div> 
    ... 
</div> 

Я попытался CSS:

#container { 
marin: 0 auto; 
} 

, но это не работает.

Answer 1

В DeSandro уже есть пример центрированной компоновки пакетов.

Пример: here.

В основном это просто центрируется с помощью CSS. Я копирую код здесь:

HTML:

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

CSS:

* { 
    -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; } 

Answer 2

взглянуть на это .. это делает то, что вам нужно ..

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