How to Center Masonry Container - css

Question

I'm trying to center a masonry container on a page. At the moment, it's aligned to the left. I have margin auto in my CSS and isFitWidth: true in JS, but neither seems to be doing anything. I've also tried putting display:block in my CSS.
This is the 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%;
}
and JS;
var container = document.querySelector('#masonry_container');
var msnry = new Masonry( container, {
// options
isFitWidth: true,
itemSelector: '.masonry_item'
});
I'd appreciate your help!

Answer 1

I was trying to figure this out for myself today and thought I'd share a possible solution.
As per Masonry's own options page "isFitWidth": true seems to be the key
http://masonry.desandro.com/options.html#isfitwidth
Here's their codepen example..
http://codepen.io/desandro/pen/nGLvx
Here's my simplified and bare bones method..
fiddle
https://jsfiddle.net/Hastig/xtw113wx/2/ - code play
https://jsfiddle.net/Hastig/xtw113wx/2/embedded/result/ - full screen
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;
}

Answer 2

Try this in the css:
.masonry_item {
width:300px;
margin:0 auto 20px auto;
padding:20px;
}
EDIT
I didn't read this correctly the first time. If you want to center the actual container you will need to set a fixed size for the container instead of 100%. Maybe 500px. Then remove the display: inline-block from the .group class. That should do it.

Answer 3

Set a fixed size for the container, such as width = 300px; height = 500px. Then, move the container with left: 50%; top: 50%. Finally, set the margin-left to -1/2 the value of the width, and margin-top to -1/2 the value of the height. This only works with absolute positioning.