Welcome to WebmasterWorld Guest from 54.161.135.168

Forum Moderators: not2easy

Centering DIV in a page

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

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

10+ Year Member



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?
3:43 am on Jul 8, 2004 (gmt 0)

10+ Year Member



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

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

10+ Year Member



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!

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

WebmasterWorld Senior Member 10+ Year Member



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.

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

10+ Year Member



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">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

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

10+ Year Member



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. :)
 

Featured Threads

Hot Threads This Week

Hot Threads This Month