Centering DIV in a page

Forum Moderators: not2easy

Message Too Old, No Replies

Centering DIV in a page

What's the best option to align DIV in a center of a page?

jmoreira

3:37 am on Jul 8, 2004 (gmt 0)

What's the best option to align DIV in center of page so people with different monitor resolution still be able to view the page properly in a center?

RammsteinNicCage

3:43 am on Jul 8, 2004 (gmt 0)

Two of the options:

#div {margin:0 auto;}
<div>stuff</div>

This doesn't work with the older versions of IE, I think 5 and lower.

#divWrapper {margin:0 auto; text-align:center;}
#div {text-align:left;}

I have enough IE5 users, so I use the second one with no problems.

Jennifer

jmoreira

6:28 pm on Jul 8, 2004 (gmt 0)

what do you mean by

#divWrapper {margin:0 auto; text-align:center;}
#div {text-align:left;}?

I need to center the content div in a page. just like we do with table align="center". How do I get that in CSS?

Thanks for the help!

createErrorMsg

7:14 pm on Jul 8, 2004 (gmt 0)

RAmmstein just told you. The ...

margin: 0 auto;

...does it in modern, compliant browsers, setting left and right margins to equal amounts based on how wide the stuff in the middle turns out to be. For IE browsers...

text-align: center;

...usually does it. Combine those two into the same rule and you're covered for almost all cases.

I usually put the margin: 0 auto on the body element to center all the stuff on a page, but it doesn't always cascade right so sometimes it has to be placed on specific containing divs to make the magic happen.

is472001

7:54 pm on Jul 8, 2004 (gmt 0)

Another solution that seems to work is to use xhtml 1.0 strict declaration (not sure if 1.1 or transitional works...I have only tried with 1.0 strict).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Noisehag

8:05 pm on Jul 8, 2004 (gmt 0)

Jennifer, excellent second option there. Looks like I have a new default thanks to you. I'm anxious to have a look on other browsers. :)