title: Centering multiple images in CSS side by side
body: <p>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).</p>
  
  <pre><code>&lt;div id="imagesMain"&gt;
      &lt;img src="IMG_20140930_140020.jpg"&gt;
      &lt;img src="IMG_20140922_164619.jpg"&gt;
      &lt;img src="IMG_20140608_181811.jpg"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And my CSS:</p>
  
  <pre><code>#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;
  }
  </code></pre>
  
  <p>The images by default are huge. the 2nd CSS block resizes them but I can't get them to do much else. Any ideas?</p>