Image Alignment

Hi All,
I'm trying to center my image AND the text following it in a box. Here is the CSS:

#box {width: 230px; margin-top: 5px; margin-left: 5px; margin-bottom: 5px; border: 2px solid Black;text-align: center;}
#box img {border: none; vertical-align: text-bottom;}

And here is the HTML:

<div id="box">
<img src="myimage.jpg"/>
This is some text describing this image. And some more stuff here. blah blah.
</div>

If I remove the text following the image, then the image aligns in the center correctly. But as soon as I add that text following the image, the text goes to the right of the image and pushes the image to the left.

I am guessing I can fix this by putting the text in another DIV section. But I would rather avoid that since this setup is already throughout my website, and I'd prefer to fix it just one place using CSS. Any help would be appreciated.

Thanks in advance.

mamamia

Center in what way? Vertically? Horizontally? Is the image supposed to be above the text?

Sorry for the misunderstanding.

I'd like the image to center horizontally in the middle of the box. The width of the box is 230px and the image's width is about 165px, so there should be a good amount of empty space left on both the right and left. The text needs to start from the next line; none of it should be aligned to the right (or left) of the picture. Very similar to the descriptive text below a thumbnail in a gallery.

Try this
#box {
width: 230px;
margin:5px;
border:2px solid #000;
text-align: center;
}
#box img {
display:block;
margin:auto;
}
Be sure to set a width and height on the image in your code and don't forget the alt attribute either.

Thank you. This worked. I had actually tried this already. My issue turned out to be the fact that I had the vspace, hspace, and align parameters set on the img tag, which is of course a no no when using stylesheets.