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

时间:2018-01-12 09:46:20

标签: html css 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;
}

1 个答案:

答案 0 :(得分:0)

如果您想要两行中的图片,请删除所有js Script并使用

columns: 2;

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