Click to See Complete Forum and Search --> : Centering a Div
Exuro
07-28-2003, 10:04 PM
On my page I have a menu that is in a Division inside the <body> of my page. Through CSS I've specified that the text-align is center, but for some reason this doesn't seem to apply to Divisions in Mozilla or Opera. The Division's nice & centered in IE, but not in other browsers... I tried putting <center> tags around it, and that works, but I don't want to put extra tags around the division. Any idea how to fix this? Everything else centers fine, just not the division... My page is posted here:
http://www.phoenixteam.org/ouuuuch/
nkaisare
07-28-2003, 10:09 PM
text-align doesn't work because its not supposed to. Its an IE bug that centers the div.
Pyro, I believe, had a nice example on div centering. Anyway, this is what you may do (not checked it myself)
* html div#centered {text-align: center;}
/* From Simplified Box Model Hack */
div#centered{margin-left: auto; margin-right: auto}
PeOfEo
07-28-2003, 10:21 PM
I read about that on the w3 schools site. It was also in some of the blue robot notes when I was playing with their code. www.bluerobot.com
If you are looking to center the <div> horizontally and vertically, take a look at http://www.infinitypages.com/research/verticalcentereddiv.htm If you only want it horizontally centered, you can remove the top: 50%; and margin-top: -125px; from the CSS declarations.
One thing we should also keep in mind is that we can save ourself all this grief if we specify a valid doctype on our pages. margin: auto; will even work (correctly) in IE if we do this. The below code works just as well with the transitional doctype... Note that if you remove the doctype, the division will no longer be centered.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Centered Div Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<div style="width: 300px; margin:auto; border: 1px solid;"></div>
</body>
</html>
PeOfEo
07-28-2003, 11:21 PM
I prefer the auto width margins http://somepunkband.europe.webmatrixhosting.net/home.html That was a layout I made for a friend just the basic thing, the box.
Exuro
07-29-2003, 12:22 PM
The margin-left:auto;margin-right:auto; thing worked great. Thanks for the help everyone! Unfortunately, my FTP is down at the moment, and the webmaster doesn't get back in town until tonight so I'm not going to be able to update it until then (in case any of you are wondering why it's not fixed on that server yet).
PeOfEo
07-29-2003, 04:11 PM
No problem, I am just starting to use css for layouts too so maybe we can help eachother out because I am a newbie at it myself.