How do I center images in the masonry grid?

Question

I just want to center the images(item) in the middle of the masonry grid (My Website). The problem is that the images are always agline to the left. So I always get a gap on the right in the masonry grid.

Sorry for this bad question composing but it's my first question here and I'm struggling with this problem now for 3 days.

This is my code for the gallary.

var container = document.querySelector('#masonry');
var msnry = new Masonry( container, {
  columnWidth: 50,
  itemSelector: '.item'
});

The gallery code looks like this.

<div id='masonry'> 
  <img class="item thumbnail" src="..."> 
  <img class="item thumbnail" src="...">
  <img class="item thumbnail" src="...">
<div>

Here is the CSS.

/* MASONRY  GALLARY */

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

.thumbnail {
  width: 100%;
  padding: 0 0;
  margin: 0 0.1px;
  display: block;
  border: hidden;
  border-color: transparent;
}

.item {
  min-width: 10px;
  max-width: 600px;
  min-height: 50px; 
  padding: 0 0;
  margin: 0 0;
  border: 0;
  border-color: transparent;
}

#masonry {
  margin: 0 auto;
}

It appears that the `margin` property value, for the selector `.item` or `.thumbnail`, should be `auto`, e.g: `margin: auto;`. You don't require a `margin` property for both these selectors. — UncaughtTypeError, Jan 12 '18 at 09:50
maybe this is the thing you are looking for https://stackoverflow.com/questions/35097167/how-to-center-masonry-items — Hushme, Jan 12 '18 at 09:56
@UncaughtTypeError this don't function how i want it to. But thank you for the answer ! — Navjot Singh, Jan 12 '18 at 10:01
@Hushme I already used (fitWidth: true) but it isn't supported in my version of masonry. — Navjot Singh, Jan 12 '18 at 10:02
It does, i have seen there code its clearly there https://masonry.desandro.com/options.html#fitwidth — Hushme, Jan 12 '18 at 10:05
I get this error "Uncaught SyntaxError: Unexpected identifier" in the inspecter. — Navjot Singh, Jan 12 '18 at 10:08

lalit bhakuni · Answer 1 · 2018-01-12T11:26:10.553

0

if you want images in two row remove all js Script and use

columns: 2;

like :https://www.w3schools.com/code/tryit.asp?filename=FNE2Q4DCPHM1

edited Jan 12 '18 at 11:26

answered Jan 12 '18 at 10:16

lalit bhakuni

603
5
14

If the broeser-window gets smaller than max-width: "..." . I get the same problem again.... – Navjot Singh Jan 12 '18 at 10:20
than max-width:100% every site create `container` you can check `bootstrap` also give .container:1170px – lalit bhakuni Jan 12 '18 at 10:21
one thing if we are add img `width:50%` also manage height https://jsfiddle.net/y6ybo4te/3/ – lalit bhakuni Jan 12 '18 at 10:46
@NavjotSingh see this one : https://www.w3schools.com/code/tryit.asp?filename=FNE2Q4DCPHM1 – lalit bhakuni Jan 12 '18 at 11:27
The images have all different sizes and i want them to be max-width: 600px; and the rows from 1 to 4 or 5. It depends on the size of the window. The problem is really that I need something what fills the gap without changing the size of the picture or the rows. – Navjot Singh Jan 12 '18 at 11:47

How do I center images in the masonry grid?

1 Answers1