如何中心砖石容器 [英] How to Center Masonry Container

问题描述

我尝试将一个砌体容器放在页面上。此时，它与左对齐。我在我的CSS和marginFieldWidth：true在JS中的margin auto，但似乎没有做任何事情。我也试过把display：block放在我的CSS。

这是HTML;

 < div id = masonry_containerclass =group> 
 
< div class =masonry_item> 
< a href =http://storyville.jonmarkoff.com/storyvillewptarget =_blank> 
< img src =images / storyville_home.pngalt =Storyville Entertainment/> 
< h3> Storyville Entertainment< / h3>< / a> 
< / div><！ -  masonry_item  - > 
 
 
< div class =masonry_item> 
< a href =http://www.ducklingfarm.comtarget =_blank> 
< img src =images / udof_home.jpgalt =丑小鸭有机农场/> 
< h3>丑小鸭有机农场< / h3>< / a> 
< / div> <！ -  masonry_item  - > 
 
 
< div class =masonry_item> 
< a href =http://www.underdonk.comtarget =_blank> 
< img src =images / underdonk_home.pngalt =underdonk/> 
< h3> Underdonk< / h3>< / a> 
< / div> <！ -  masonry_item  - > 
 
< div class =masonry_item> 
< a href =http://www.jaeeunlee.comtarget =_ blank> 
< img src =images / jaeeunlee_home.pngalt =jaeeunlee/> 
< h3> www.jaeeunlee.com< / h3>< / a> 
< / div> <！ -  masonry_item  - > 
 
< div class =masonry_item> 
< img src =images / goindoor_hospitals.pngalt =goindoor/> 
< h3> Goindoor< / h3> 
< / div> <！ -  masonry_item  - > 
 
< div class =masonry_item> 
< img src =images / cakes_home.jpgalt =奇妙的奇异蛋糕/> 
< h3>奇妙的异想天开的蛋糕< / h3> 
< / div> <！ -  masonry_item  - > 
 
< / div><！ - ＃masonry_container .group  - > 
  

CSS;

  .group {
 display：inline-block; 
 clear：both; 
} 
 
 .group：after {
 visibility：hidden; 
 display：block; 
 font-size：0; 
内容：; 
 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％; 
} 
  

和JS;

  var container = document.querySelector（'＃masonry_container'）; 
 var msnry = new Masonry（container，{
 // options 
 isFitWidth：true，
 itemSelector：'.masonry_item'
}）; 
  

感谢您的帮助！

解决方案

尝试这个在css：

  .masonry_item {
 width： 300px; 
 margin：0 auto 20px Auto; 
 padding：20px; 
} 
  

EDIT

我第一次没有正确读取。如果要将实际容器居中，则需要为容器设置固定大小，而不是100％。也许500px。然后从.group类中删除display：inline-block。这应该做。

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!

解决方案

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.

这篇关于如何中心砖石容器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！