Question

我只想将图像（项目）置于砌体网格（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 Script并使用

columns: 2;

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

如何将图像置于砌体网格中心？

1 个答案: