title: How do I center these three blocks horizontally?
body: <p>I'm trying to center three linked images horizontally. Below is what I've tried so far. I got the images aligned horizontally, but I can't figure out how to move all three to the center.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="outer-wrapper"&gt;
    &lt;div class="wrapper2"&gt;
      &lt;div class="wrapper1"&gt;
        &lt;a href="/Chef"&gt;
          &lt;img src="http://i.imgur.com/tWpiPid.png"&gt;
        &lt;/a&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="wrapper2"&gt;
      &lt;div class="wrapper1"&gt;
        &lt;a href="/Tactical"&gt;
          &lt;img src="http://i.imgur.com/KQPmsBn.png"&gt;
        &lt;/a&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="wrapper2"&gt;
      &lt;div class="wrapper1"&gt;
        &lt;a href="/Tools"&gt;
          &lt;img src="http://i.imgur.com/XNpJVu1.png"&gt;
        &lt;/a&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>body { background:#000 }
  a { display:block }
  img { width:150px }
  .wrapper2 { float:left }
  .outer-wrapper { text-align:center }
  </code></pre>
  
  <p>Fiddle: <a href="https://jsfiddle.net/3hw11mgs/" rel="nofollow">https://jsfiddle.net/3hw11mgs/</a></p>