Как разместить контейнер для масонства

Question

Я пытаюсь сосредоточить контейнер кладки на странице. На данный момент он выровнен по левому краю. У меня есть margin auto в моем CSS и isFitWidth: true в JS, но ничто не делает ничего. Я также попытался поставить display: block в моем CSS.

Это HTML;

<div id="masonry_container" class="group"> 

<div class="masonry_item"> 
    <a href="http://storyville.jonmarkoff.com/storyvillewp"target="_blank"> 
    <img src="images/storyville_home.png" alt="Storyville Entertainment"/> 
    <h3>Storyville Entertainment</h3></a> 
</div><!--masonry_item--> 


<div class="masonry_item"> 
    <a href="http://www.ducklingfarm.com"target="_blank"> 
    <img src="images/udof_home.jpg" alt="Ugly Duckling Organic Farm"/> 
    <h3>Ugly Duckling Organic Farm</h3></a> 
</div> <!--masonry_item--> 


<div class="masonry_item"> 
    <a href="http://www.underdonk.com"target="_blank"> 
    <img src="images/underdonk_home.png" alt="underdonk"/> 
    <h3>Underdonk</h3></a> 
</div> <!--masonry_item--> 

<div class="masonry_item"> 
    <a href="http://www.jaeeunlee.com" target="_blank"> 
    <img src="images/jaeeunlee_home.png" alt="jaeeunlee"/> 
    <h3>www.jaeeunlee.com</h3></a> 
</div> <!--masonry_item--> 

<div class="masonry_item"> 
    <img src="images/goindoor_hospitals.png" alt="goindoor"/> 
    <h3>Goindoor</h3> 
</div> <!--masonry_item--> 

<div class="masonry_item"> 
    <img src="images/cakes_home.jpg" alt="wonderfully whimsical cakes"/> 
    <h3>Wonderfully Whimsical Cakes</h3> 
</div> <!--masonry_item--> 

</div><!--#masonry_container .group--> 

CSS;

.group { 
    display: inline-block; 
    clear:both; 
} 

.group:after { 
    visibility: hidden; 
    display: block; 
    font-size: 0; 
    content: " "; 
    clear: both; 
    height: 0; 
} 

#masonry_container { 
margin:50px auto; 
width:100%; 
position:relative; 
z-index:2001; 
} 

.masonry_item { 
width:300px; 
margin:0 0 20px 0px; 
padding:20px; 
} 

.masonry_item:hover{ 
outline:1px solid white; 
} 

#masonry_container img { 
width:100%; 
} 

и JS;

var container = document.querySelector('#masonry_container'); 
var msnry = new Masonry(container, { 
    // options 
    isFitWidth: true, 
    itemSelector: '.masonry_item' 
}); 

Буду признателен за вашу помощь!

Answer 1

Попробуйте это в CSS:

.masonry_item { 
    width:300px; 
    margin:0 auto 20px auto; 
    padding:20px; 
} 

EDIT

Я не читал это правильно в первый раз. Если вы хотите центрировать фактический контейнер, вам нужно будет установить фиксированный размер для контейнера вместо 100%. Возможно 500px. Затем удалите отображение: встроенный блок из класса .group. Это должно сделать это.

Answer 2

Установите фиксированный размер для контейнера, например width = 300px; height = 500px. Затем переместите контейнер с left: 50%; top: 50%. Наконец, установите margin-left на -1/2 значение ширины и margin-top на -1/2 значение высоты. Это работает только с абсолютным позиционированием.

Answer 3

Я пытался понять это сегодня для себя и думал, что смогу поделиться возможным решением.

По собственной странице параметров кирпичной кладки в "isFitWidth": true, кажется, ключ

http://masonry.desandro.com/options.html#isfitwidth

Вот их codepen пример ..

http://codepen.io/desandro/pen/nGLvx

Вот мой упрощенным и голый метод кости ..

скрипка

https://jsfiddle.net/Hastig/xtw113wx/2/ - код игры

https://jsfiddle.net/Hastig/xtw113wx/2/embedded/result/ - полный экран

HTML

<div class="masonry-container js-masonry" data-masonry-options='{ "isFitWidth": true }'> 
    <div class="image-div"> 
     <img class="image" src="" style="width: 200px; height: 100px;"> 
    </div> 
    <!-- ..lots more divs in jsfiddle.. --> 
</div> 

CSS

.masonry-container { 
    margin: 0 auto; /* this is the css that keeps the container centered in page */ 
} 

.image-div { 
    float: left; 
    width: 230px; 
    margin: 5px; 
    font-size: 0; 
} 

.image { 
    width: 230px; 
    height: auto; 
}