Help - Search - Members - Calendar
Full Version: Image won't center in div
HTMLHelp Forums > Web Authoring > Markup (HTML, XHTML, XML)
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 smile.gif
Frederiek
You're welcome.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2018 Invision Power Services, Inc.