Centering multiple images in CSS side by side

Question

I'm a beginner at CSS and HTML so I'm sure this is a mess. But what I'm trying to do is center 3 images side by side in a horizontal center in CSS. I've tried different solutions have gotten them to align properly but they still stay stuck to the left of the page or will stack on top of each other (and sometimes overlap).

<div id="imagesMain">
    <img src="IMG_20140930_140020.jpg">
    <img src="IMG_20140922_164619.jpg">
    <img src="IMG_20140608_181811.jpg">
</div>

And my CSS:

#imagesMain{
    display: inline-block;
    position:relative;
    padding: 0;
    margin-left:auto;
    margin-right:auto;
    margin-top: 20px;
    text-align:center;
}
#imagesMain img{
    height: 400px;
    width: 300px;
    vertical-align: center;
}

The images by default are huge. the 2nd CSS block resizes them but I can't get them to do much else. Any ideas?

Answer 1

You can use the almost same CSS, but with one simple correction, change:

vertical-align: middle;

And remove these:

display: inline-block;
position: relative;

There's no center here. It must be middle. Please correct it. And remove display: inline-block from the <div>. Your final code should be like:

#imagesMain {
  padding: 0;
  margin-left: auto;
  margin-right: auto;
  margin-top: 20px;
  text-align: center;
}
#imagesMain img {
  height: 400px;
  width: 300px;
  vertical-align: middle;
}

<div id="imagesMain">
  <img src="IMG_20140930_140020.jpg">
  <img src="IMG_20140922_164619.jpg">
  <img src="IMG_20140608_181811.jpg">
</div>

Click on Run Code Snippet and press Full Page to check if this is what you are expecting.