...

View Full Version : centering img in css



Bob42
01-20-2008, 07:30 PM
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
01-20-2008, 07:54 PM
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
01-21-2008, 04:19 PM
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
01-21-2008, 04:42 PM
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
01-21-2008, 06:41 PM
Because that leaves the image inline, and that leaves extra space for descending letters =P



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum