html - 如何在 masonry 网格中居中图像？

Question

我只想将图像(元素)置于 masonry 网格(My Website)的中心。问题是图像总是向左对齐。所以我总是在砖石网格的右边有一个缺口。

很抱歉提出这个糟糕的问题，但这是我的第一个问题，我现在已经为这个问题苦苦挣扎了 3 天。

这是我的画廊代码。

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

图库代码如下所示。

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

这是 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;
}

Answer 1

如果你想要两行中的图像，请删除所有 js 脚本 并使用

columns: 2;

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