Creating images inline that squeeze when browser width is changed

Question

I would like to create a page on my website where there are 5 inline images which are automatically resized with the browser so they would be in the same position but just resized when viewed on any screen size.

Currently i have it working in such a way that there are 5 images all inline with each other and they do squeeze and keep their aspect ratio when i change the browsers size, but my question is how do i make this line of 5 images be central on the page at all times without them changing their position to go below eachother?

I have tried to add margin:0 auto; to both my container which is #images and to my img {} but neither seem to work,

Here is my current CSS;

#images {
margin-top:400px;

}

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

} 

Here is 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>

Thanks for any help

To help you understand more here is a JSfiddle showing what i currently have, all i would like is the row of images to be centered at all times, http://jsfiddle.net/c26NJ/

Answer 1

Set either width or height css property in % and set the other one as auto, for example

.imageGallery
{
 width:20%;
 height:auto;
 display:inline; // or try float:left
}

Answer 2

See this FIDDLE

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

Answer 3

Check this fiddle

In the above fiddle the images will remain in the same line no matter to how much extent the user resizes the window.

CSS

html,body{
    width:100%;
    height:100%;
    margin:0px auto;
    padding:0px;
    text-align:center;
}
#images {
    display:inline-block;
    width:100%;
}

img {
    width:18%;
    padding-left:2px;
    position:relative;
    display:table-cell;
} 

Answer 4

This might work (assuming the #images is inside a full-width section):

#images {
    max-width: 100%;
    width: 400px;
    margin: 400px auto;
}

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

Answer 5

HTML:

<div id="images">
  <img src="images/imagepage/200x2001.jpg" class="first">
  <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>

and

CSS:

#images {
  width: 100%;
}

#images img {
  width: 19.6%;
  float: left;
  display: block;
  margin-left: 0.5%;
}

#images img.first {
  margin-left: 0;
}