centering img in css

[Bob42]

I'm trying to find an efficient way for centering hyperlinked images in CSS. I wan this way to work with IE, firefox, and opera. I can easily use the <center> element, but XHTML 1.0 Strict doesn't support that.

.newspost img {
display:block;
margin-left:auto;
margin-right:auto;
border:0px;
text-align:center;
}

Right now that's what I use. The problem with that is that when I'm trying to put two or more images next to each other, the second image just moves onto the next line right underneath the first image. Is there a better way of doing this?

[Excavator]

Hello Bob42,

margin:0 auto; should work for centering one image. When your putting 2 images side by side you are no longer centering an image... you'll have to do something different than your margin:0 auto;

Try float:left; on both images and adjust the positions with margin.

[Actinia]

You could put the two images into one div (called say wrap), then center that using margin auto.

.newspost #wrap {
display:block;
border:0px;
text-align:center; /* keep IE6 happy */
width: 500px; /* sufficient to hold both images */
}
.newspost #wrap img{
margin-left:auto;
margin-right:auto;
}

John

[abduraooft]

What's wrong in giving just text-align:center to the container of all these hyper linked imgs and then giving

a img {border:none}

?

[Apostropartheid]

Because that leaves the image inline, and that leaves extra space for descending letters =P