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 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?

score 4 · Accepted Answer · answered Nov 21 '11 at 15:30

4

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>

answered Nov 21 '11 at 15:30

Lee Kowalkowski

11,591
3
40
46

This works quite well. I have read while looking for the answer to my question, however, that [it's not the proper way to do it](http://stackoverflow.com/questions/7055393/css-center-image-using-text-align-center). I'll stick with it for the moment, until somebody gives another option. Thanks! – rberaldo Nov 21 '11 at 15:49
@rberaldo: That link says `text-align:center` on the IMG element is not the way to do it, I'm saying to do it on the IMG element's container, not the IMG itself. – Lee Kowalkowski Nov 21 '11 at 16:23
You have a point. I automatically thought it shouldn't be used to center any images _at all_, since it's meant to center text (it's only a guess, but the property is called `*text*-align`, after all). – rberaldo Nov 21 '11 at 16:33
Yes, but images are inline elements, so they are inserted into the text, e.g. they will affect the line height when rendered like this. They can also go inside elements (links) and you cannot have any block level elements inside a link in HTML4, although that is allowed in HTML5 now. – Lee Kowalkowski Nov 22 '11 at 09:24
Interesting. Thanks for the explanation. – rberaldo Nov 22 '11 at 14:37

score 0 · Answer 2 · answered Nov 21 '11 at 15:29

0

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

answered Nov 21 '11 at 15:29

admin

41
1
6

I tried this before, it didn't work. With `display:inline;`, although the icons are in the same line, they're flushed to the left for some reason. – rberaldo Nov 21 '11 at 15:46

Center two images in a div

2 Answers2