html - 创建在浏览器宽度更改时挤压的内联图像

Question

我想在我的网站上创建一个页面，其中有 5 个内联图像，它们会随浏览器自动调整大小，因此它们将处于相同的位置，但在任何屏幕尺寸上查看时都会调整大小。

目前我的工作方式是有 5 张图像相互内嵌，当我更改浏览器大小时它们确实会挤压并保持纵横比，但我的问题是如何制作这 5 行图像始终位于页面的中央，而不改变它们的位置以低于彼此？

我尝试添加 margin:0 auto;我的容器 #images 和我的 img {} 但似乎都不起作用，

这是我当前的 CSS；

#images {
margin-top:400px;

}

img {
width:18%;
padding-left:2px;
position:relative;

} 

这是 HTML;

<div id="images">
<img src="images/imagepage/200x2001.jpg">
<img src="images/imagepage/200x2001.jpg">
<img src="images/imagepage/200x2001.jpg">
<img src="images/imagepage/200x2001.jpg">
<img src="images/imagepage/200x2001.jpg">
</div>

感谢您的帮助

为了帮助您了解更多，这里有一个 JSfiddle 显示了我目前拥有的内容，我只想要始终居中的图像行，http://jsfiddle.net/c26NJ/

Answer 1

看到这个 FIDDLE

#images {
    margin-top:400px;
    width:100%;
    text-align:center;
}
img {
    width:18%;
    padding-left:2px;
    position:relative;
    box-sizing:border-box;
}