定位多個圖像的中間

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