我目前在一个页面上有4张图片。我喜欢将它们水平居中,这样当页面缩小时,它们就可以继续保持居中。如果页面收缩过大,我想将它们垂直堆叠。
这是一个做我想做的事情的网站:
http://www.wpexplorer.me/premium/photojax/
这是我的代码:
http://jsfiddle.net/NYcdS/
HTML格式
<div id="menu">
<img class ="blog" src="http://s18.postimg.org/il7hbk7i1/image.png">
<img class ="music" src="http://s18.postimg.org/4st2fxgqh/image.png">
<img class ="projects" src="http://s18.postimg.org/sxtrxn115/image.png">
<img class ="bio" src="http://s18.postimg.org/5xn4lb37d/image.png">
CSS格式
#menu {
height: 300px;
width: 1070px;
background: #222;
margin: 30px auto;
}
.blog {
height: 300px;
width: 250px;
}
.music {
height: 300px;
width: 250px;
}
.projects {
height: 300px;
width: 250px;
}
.bio {
height: 300px;
width: 250px;
}