html - 定位多张图片的中间

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);
}