Image won't center in div, My image won't center in a div I created. Options

[kinetickatie]

Here's the image of the page: http://i52.tinypic.com/2z3s8id.png (I don't have it uploaded to a site yet)

Here's the HTML I have for this section of the document ("content2" is the area of the page with the white background and photo):

<div id="content2">
<center>
<span class="style10">Featured Product</span></center>
<center><img src="images/featured1.jpg" alt="Wedding Suite" width="300" height="300" border="10"></center>
<center>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p class="style9">Graphic Flora Wedding Collection</p>
</center>
</div>

Try to ignore all the   coding, it was the only way I knew how to get my text to sit underneath the image. My CSS for the div is:

#content2{
background-color:#FFFFFF;
float:left;
width:350px;
margin: 28px 0px 100px 25px;
font-family:Tahoma;
height:350px;
}

My problem is the image won't center in the div. It looks centered in Dreamweaver, but when I preview it in Firefox it is flush with the left side of the div. Any suggestions? I am pretty new to this so I appreciate any help!

[kinetickatie]

Oh, and I tried removing the float:center tag but then the whole page gets out of alignment (the div narrows and overlaps the menu and the text sits underneath the menu...big mess).

[Frederiek]

I see the image (or rather the representation of the lack of it) centered in the div. Set a border to #content2 (e.g. border: solid 1px red;) and you'll see.

But in fact, the <CENTER> element is deprecated in favor of style sheets (see http://htmlhelp.com/reference/html40/block/center.html).

For text, you can use text-align: center; on a block-level element, such as P.

However, SPAN and IMG are inline elements, so you'll explicitly have to turn them into block-level (display: block;). Then you can use the text-align on the SPAN and use margin: 0 auto; on the IMG to center the image.

Then, you won't need all those empty <P> tags anymore. Of course, it also depends on how you styled .style9 and .style10 (which is BTW an awful, unclear naming convention à la DW).

[kinetickatie]

Thanks for your response Frederiek! The only trouble I'm having now is figuring out how to format the SPAN on the IMG...does this go in the CSS or the html? What does it look like, for example?

[Frederiek]

You could use a <p> (instead of <span>), which is block-level by default. I'd use a class, as probably you don't want all your text on the page to be centered.

So, your HTML would be:
<p class="feature"> Featured Product </p>

And then the CSS:
.feature {
text-align: center;
}

You could use the same class on the text below the image.

[kinetickatie]

I've got to be doing something wrong, it still won't center. I am uploading the updated version now to www.naiveglow.com. I copied and pasted what you wrote and still no centering. Hmm.

[Frederiek]

It's because the image is affected by your CSS:
#header img {
float: left;
}

Create another style rule like this:
#content2 img {
margin: 0px auto;
}

Then get rid of all the empty <p></p> tags and the text underneath will get into place.

So far so good for the centering...

[kinetickatie]

Thank you so much Frederiek, it's centered now after deleting the #header img rule! The text looks great without all the <p> tags too. Thanks again

[Frederiek]

You're welcome.