html - 如果页面宽度缩小，将 4 个图像水平居中并垂直堆叠？

Question

我目前一页有 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;
}

Answer 1

在我看来，你想要这样简单的东西：

#menu {
    text-align: center;
    margin: auto;
}

http://jsfiddle.net/5W2C2/3/

（使图像更小一点，以便更容易地看到 jsfiddle 中发生了什么）

是这样吗？