如何居中砌体容器

Question

我正在尝试在页面上居中放置一个砌体容器。目前，它与左侧对齐。我的 CSS 中有自动边距，JS 中有 isFitWidth: true ，但似乎都没有做任何事情。我也尝试将 display:block 放在我的 CSS 中。

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

和JS；

var container = document.querySelector('#masonry_container');
var msnry = new Masonry( container, {
    // options
    isFitWidth: true,
    itemSelector: '.masonry_item'
});

感谢您的帮助！

Answer 1

我今天试图自己解决这个问题，并认为我会分享一个可能的解决方案。

根据 Masonry 自己的选项页面 "isFitWidth": true 似乎是关键

http://masonry.desandro.com/options.html#isfitwidth

这是他们的 codepen 示例..

http://codepen.io/desandro/pen/nGLvx

这是我的简化和简单的方法..

小提琴

https://jsfiddle.net/Hastig/xtw113wx/2/ - 代码播放

https://jsfiddle.net/Hastig/xtw113wx/2/embedded/result/ - 全屏

html

<div class="masonry-container js-masonry"  data-masonry-options='{ "isFitWidth": true }'>
    <div class="image-div">
        <img class="image" src="" style="width: 200px; height: 100px;">
    </div>
    <!-- ..lots more divs in jsfiddle.. -->
</div>

css

.masonry-container {
    margin: 0 auto; /* this is the css that keeps the container centered in page */
}

.image-div {
    float: left;
    width: 230px;
    margin: 5px;
    font-size: 0;
}

.image {
    width: 230px;
    height: auto;
}

Answer 2

在 css 中试试这个：

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

编辑

我第一次没有正确阅读此内容。如果要使实际容器居中，则需要为容器设置固定大小而不是 100%。也许是 500 像素。然后从 .group 类中删除 display: inline-block 。应该这样做。

Answer 3

为容器设置固定大小，如width = 300px; height = 500px。然后，使用left: 50%; top: 50% 移动容器。最后，将margin-left 设置为-1/2 的宽度值，将margin-top 设置为-1/2 的高度值。这仅适用于绝对定位。