Here is a div setup that I am working with:
<div id="browsers">
<h2>Title</h2>
<p>Text recommending 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>
With the following CSS styles:
#browsers {
margin:0 auto;
padding:22px;
width:500px;
background:white;
}
I am trying to center the two images in the middle of the div. Although I have managed to center them using:
#browsers img {
margin-left:auto;
margin-right:auto;
display:block;
}
The result is not ideal as one image is stacked on top of the other. I would like them to be aligned in a row. What is the best approach to achieve this layout?