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 the CSS

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

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

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

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?

Answer 1

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

As you have extra stuff in #browsers. You’ll need to put your browser icons in a separate div or your extra stuff outside of #browsers.

Eg.

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