center img within content div but not p

[pjkinann]

I need to center just the image within a content div, but not the text.

I tried the descendant selector of
#content img {
text-align: center
}
and I tried content src and content img src. What works for centering ONLY the image within the content where I want the p tag to stay left aligned?

<Sorry, no email addresses.
See Terms of Service [webmasterworld.com]>

[edited by: tedster at 5:14 am (utc) on April 30, 2005]

[rjohara]

Try:

margin: 0 auto;

(Setting the left and right margins of an image to "auto" should center the image.)

[pjkinann]

Then it'll center every image on the site because it's not specific.

I have a content div and within that content is text (which I want to remain left aligned as the < p> tag declares, but the image is what I want centered.

So on my stylesheet, how do I write the descedant selector within the content area?

#content img {
text-align: center;
{

Or is it img src? or just src? I've actually tried them all and none of them work.

But I can;t just center image without being specific or all images in the site will be centered.

[rjohara]

#content img {
margin: 0 auto;
}

[pjkinann]

Phooey! that didn't work either. Well, thanks for trying. I don't think there is anything left to try. I guess I'll just use good ole-fashioned html to center that image. Wanted to use CSS, but sometimes if it doesn't work, go back to basics. :o) Thanks!

[createErrorMsg]

I'll just use good ole-fashioned html to center that image.

Please don't. The auto margin technique is what you need, you're just missing one vital piece.

First, let's make sure I'm clear on what is going on. You have a <p> with the image inside, and you want it centered? I assume you are introducing a line break before and a line break after in order to get the image onto it's own line. You then want to center the image on that line. Is this about right?

The problem here is that an image is an inline element. Even when you use <br /> to move it onto it's own line, it remains part of an inline formatting context, which means that text-align:center will apply to the entire inline context. It also means that applying auto left and right margins won't work, since that technique works only with block level elements.

But what you want is for the image to be a block level element, anyway. If the image were block level, it would create it's own line breaks (eliminating the need for manually adding <br />s), and also establish it's own formatting context seperate from that of the inline content around it.

So the key here is in setting the image to display:block. You can then use the margin technique for compliant browsers, and add the text-align:center for older IE browsers that don't support auto margins. All without having any effect on the inline text of the paragraph.

html:
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
<img src="path/to/image.gif" alt="myImage" />
Sed diam nonummy nibh euismod tincidunt ut laoreet dolore.</p>

css:
p{
text-align:left;
}
img{
display:block; /*allows the element to take auto margins*/
margin:0 auto; /*centers in compliant browsers*/
text-align:center; /*centers in old versions of IE*/
}

cEM

[pjkinann]

You're a genius! You did it! Thank you SOOOOO much!