title: Center two images in a div
body: <p>I have a div like this</p>
  
  <pre><code>&lt;div id="browsers"&gt;
    &lt;h2&gt;Title&lt;/h2&gt;
    &lt;p&gt;Text recomending the use of either Chrome or Firefox.&lt;/p&gt;
    &lt;a href="http://google.com/chrome/"&gt;&lt;img src="img/64-chrome.png" /&gt;&lt;/a&gt;
    &lt;a href="http://mozilla.org/firefox/"&gt;&lt;img src="img/64-firefox.png" /&gt;&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and the CSS</p>
  
  <pre><code>#browsers {
    margin:0 auto;
    padding:22px;
    width:500px;
    background:white;
  }
  </code></pre>
  
  <p>and I want to center the two images in the middle of the div. I have managed to center them with</p>
  
  <pre><code>#browsers img {
    margin-left:auto;
    margin-right:auto;
    display:block;
  }
  </code></pre>
  
  <p>however the output is not what I want, since one image is on the top of the other. I want them to be on the same line. What's the best or the usual way to do it?</p>