PDA

Click to See Complete Forum and Search --> : simple - rel. horizontal centering of div

xdementia
06-27-2004, 11:27 AM
Ok this is a simple question, somehow I'm just missing it: I'm trying to simply align a div relatively centered horizontally in CSS. The closest I've gotten is:

#maindiv
{
position:absolute;
left: 35%;
}
IncaWarrior
06-27-2004, 11:47 AM
#maindiv
{
width:##;
margin:0px auto;
}
JPnyc
06-27-2004, 11:48 AM
div { text-align:center }
xdementia
06-27-2004, 04:55 PM
Neither of those worked, the second one doesn't because I want an image to be centered, not text. But I found a way to do it using XHTML, not CSS, but this way could work anyhow...

<div align="center"
richiebman
06-27-2004, 05:08 PM
#maindiv {
margin-left:auto;
margin-right:auto;
}

But this doesn't work in IE. So for IE if you put

text-align:center;

in the block element that #maindiv is inside it works great and validates.

I think that is what you want?

R
xdementia
06-27-2004, 09:50 PM
cool thanks
xdementia
06-27-2004, 11:45 PM
Hmm, none of these seem to be working at all. I have a really simple <div> within a <div> and an <img src> in that and it simply isn't being centered. Here's the CSS for the outermost <div>

#main
{
width:642px;
overflow: auto;
height: 400px;
margin-left:auto;
margin-right:auto;
text-align:center;
color: #333333;
}
richiebman
06-28-2004, 08:14 AM
The below code works for me.

<html>
<head>
<style type="text/css">
#maindiv {
width:642px;
overflow: auto;
height: 400px;
color: #333333;
border:1px solid #000;
text-align:center;
}
</style>
</head>
<body>
<div id="maindiv">
<div id="imagediv">
<img src="graphic.jpg" />
</div>
</div>
</body>
</html>


The graphic/image stays centred even if you remove the #imagediv and just have the graphic/image inside the #maindiv. It's all down to the

text-align:center;

However if you then wanted to centre #maindiv, you then put

margin-left:auto;
margin-right:auto;

in the #maindiv and for IE put

text-align:center;

in the body style.

R
p.s. Just put the border in to see that it was centred.
xdementia
06-28-2004, 05:56 PM
Wow, this sucks, I've tried just about everything and it's still not centering, I want the maindiv (which is my outermost division) to be centered. Maybe I'll just put it all in a centered table or something. I'm using dreamweaver and tried viewing it in several different browsers even from outside of Dreamweaver and none of them were centered.
fredmv
06-28-2004, 06:00 PM
Using IE? You're probably in quirks mode or something. Check this thread (http://www.webdeveloper.com/forum/showthread.php?s=&threadid=34362) for a working example.
xdementia
06-28-2004, 06:14 PM
ok lots of weird **** going on here. First of all I posted it on the web to check it out on my windows machine here (http://www.existest.org/xdementia/interface.html) . It seems to work on all browsers now except IE on my mac. I guess I'll just have to settle for having it on the side on IE for macs.
richiebman
06-28-2004, 06:30 PM
Glad you got it working.

Don't know if it will help with your other problem, but you didn't close the

text-align:center

in your stylesheet.

R
xdementia
06-28-2004, 07:42 PM
wow that completely solved the problem. Thanks for dealing with all my stupidity guys :D you rule.