Question

我正在制作相册。当你在一个较小的窗口中查看网站时，我遇到了问题，一张照片将不适合在右边，并留下一个很大的差距

<div id="gallery">
    <a href="#">
        <img src="images/1.jpg" />
    </a>
    <a href="#">
        <img src="images/2.jpg" />
    </a>
    <a href="#">
        <img src="images/3.jpg" />
    </a>
    <a href="#">
        <img src="images/4.jpg" />
    </a>
    ....
</div>
* { margin: 0; padding: 0;}

body {
    background: #000;
}

#gallery {
    width: 100%;
    margin: 25px auto;
    padding:0 12.5px;
}

#gallery a {
    display: block;
    float: left;
    margin: 0 12.5px 25px 12.5px;
    position: relative;
    height:150px;
    width:225px;
    background: #FFF;
    -webkit-box-shadow: 0 2px 15px 1px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0 2px 15px 1px rgba(0, 0, 0, 0.5);
    box-shadow: 0 2px 15px 1px rgba(0, 0, 0, 0.5);

}
#gallery a img {
    height:150px;
    width:225px;
    display:none;
}

您可以在此处查看工作版本：http://codepen.io/Dirkandries/full/hLxft

如何始终对齐所有图像的中心？

我已经尝试了margin: 0 auto;，但它似乎无法正常工作

Answer 1

在链接上使用display:inline-block而不是向左浮动，然后在图库包装上使用text-align:center。

<强> http://codepen.io/anon/pen/jIfLh

#gallery {
    width: 100%;
    margin: 25px auto;
    padding:0 12.5px;
    text-align:center;
}

#gallery a {
    display: inline-block;
    margin: 0 12.5px 25px 12.5px;
    position: relative;
    height:150px;
    width:225px;
    background: #FFF;
    -webkit-box-shadow: 0 2px 15px 1px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0 2px 15px 1px rgba(0, 0, 0, 0.5);
    box-shadow: 0 2px 15px 1px rgba(0, 0, 0, 0.5);
}

定位多个图像的中间位置

1 个答案: