Center two images in a div

Question

I have a div like this

<div id="browsers"> <h2>Title</h2> <p>Text recomending the use of either Chrome or Firefox.</p> <a href="http://google.com/chrome/"><img src="img/64-chrome.png" /></a> <a href="http://mozilla.org/firefox/"><img src="img/64-firefox.png" /></a> </div> 

and CSS

 #browsers { margin:0 auto; padding:22px; width:500px; background:white; } 

and I want to center two images in the middle of the div. I managed to center them with

 #browsers img { margin-left:auto; margin-right:auto; display:block; } 

however, the result is not the one I want, since one image is on top of another. I want them to be on the same line. What is the best or usual way to do this?

Answer 1

Usually just #browsers {text-align:center;} and delete what you have in #browsers img {...}

How do you have extra stuff in #browsers . You will need to place your browser icons in a separate div or your additional material outside of #browsers .

Eg.

<div class="browser-icons"> ... </div>

Answer 2

Your problem is that you are reporting that the images are blocks in display:block; ... instead of display:inline; .