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%;
}#maindiv
{
width:##;
margin:0px auto;
}div{ text-align:center }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"#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?
Rcool thanksHmm, 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;
}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=http://www.webdeveloper.com/forum/archive/index.php/"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.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.Using IE? You're probably in quirks mode or something. Check this thread (<!-- m --><a class="postlink" href="http://www.webdeveloper.com/forum/showthread.php?s=&threadid=34362">http://www.webdeveloper.com/forum/showt ... adid=34362</a><!-- m -->) for a working example.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 (<!-- m --><a class="postlink" href="http://www.existest.org/xdementia/interface.html">http://www.existest.org/xdementia/interface.html</a><!-- m -->) . 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.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.
Rwow that completely solved the problem. Thanks for dealing with all my stupidity guys
you rule.
#maindiv
{
position:absolute;
left: 35%;
}#maindiv
{
width:##;
margin:0px auto;
}div{ text-align:center }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"#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?
Rcool thanksHmm, 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;
}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=http://www.webdeveloper.com/forum/archive/index.php/"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.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.Using IE? You're probably in quirks mode or something. Check this thread (<!-- m --><a class="postlink" href="http://www.webdeveloper.com/forum/showthread.php?s=&threadid=34362">http://www.webdeveloper.com/forum/showt ... adid=34362</a><!-- m -->) for a working example.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 (<!-- m --><a class="postlink" href="http://www.existest.org/xdementia/interface.html">http://www.existest.org/xdementia/interface.html</a><!-- m -->) . 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.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.
Rwow that completely solved the problem. Thanks for dealing with all my stupidity guys
you rule.