title: Image alignment issues
body: <p>I have a problem with a website I am developing right now, and I've been scratching my head here for a while. Basically I have a responsive design, however I want the images to all be centered together (with the yellow image directly above where the magenta image is currently) and then the 'block' of images to center horizontally and vertically within available space. The code is currently hosted at <a href="http://dorreen.webfactional.com" rel="nofollow">http://dorreen.webfactional.com</a></p>
  
  <p>The problem is that the images are misaligned - the top images are spread out and the bottom images are clustered together. I'm not sure exactly what I should post - Here's a <a href="http://jsfiddle.net/edfjc4w0/" rel="nofollow">JSfiddle</a> (Except the fiddle sort of works how I want it to)</p>
  
  <p>The code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#textContent { width: 49%; }
  #imgContent { width: 49%; }
  .content {
      float: left;
      padding: 0% 0.5%;
  }
  .content &gt; img { margin: 0.5% auto; }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="content" id="imgContent"&gt;
      &lt;img src="http://placehold.it/240x240/ff0000/000000" /&gt;
      &lt;img src="http://placehold.it/240x240/ffff00/000000" /&gt;
      &lt;img src="http://placehold.it/240x240/00ff00/000000" /&gt;
      &lt;img src="http://placehold.it/240x240/ff00ff/000000" /&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>