我正在制作相册。当你在一个较小的窗口中查看网站时,我遇到了问题,一张照片将不适合在右边,并留下一个很大的差距
<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;
,但它似乎无法正常工作
答案 0 :(得分: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);
}