Hi!

I would like to center align a div.

Like this:



Could someone please help me!

<div style="margin: 0px auto; text-align: center; width: 760px;"> (replace width as appropriate)
<div style="text-align: left;"> (counters the centering above, which is only for old versions of IE anyway).

Thanks Adam!

Very Good! It works!

I didn't know about margin: auto

Not many people do. But any time I can pass that bit of mad knowledge onto someone, I'll do it.

So on that note, care to take a look into why that's not working on a page I'm trying to build? I'm using this code:

<img src="images/Nally.jpg" alt="Nally in black and white" style="margin:0 auto; text-align:center" />

to try to center an image at the bottom of the first page in a new site I'm building: http://seattle-portraits.com/

I know this is a pretty amateurish question ... I'm just not sure why what I'm doing isn't working.

( PS: The site runs through an iFrame - I'm working on fixing that - but I don't want to post the "real" address here because I don't want it to come up as duplicate content. )

Put the proper width and height measurements on the image. You should ALWAYS put in the width and height, otherwise you're forcing the browser to figure it out and you don't want that.

The major measurement is the width in this case, though, Forrest. While LNR is correct about specifying both, in your CSS you must specify the width in order to ensure that it knows how wide the element is supposed to be.

The other thing I'm not sure about (mostly because I've never tried it) is whether the centering method will work on an image since it's an inline element. Mind you, that one you'll have to play with. If the image doesn't work, a div definitely will.

This works fine for centering an image on my blog:

<div style="text-align: center;">

<img src="http://thort.se/pictures/jpg/hen_in_stairs.jpg" width="367" height="543" alt="" />

</div>

That's because you're telling it to center everything INSIDE that div.

margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;

Or in short hand as Adam said:
margin: 0px auto;