Forum Moderators: not2easy
E.G. doctype like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
CSS:
/* properties of the body */
#body {
margin: 0px;
}
/* properties of centered div*/
#centereddiv {
display:block;
margin:0px auto;
width:200px;
height:200px;
}
I hope this is usefull for people who still use text-align for centering.
margin:auto also works with a valid 4.01 doctype, no real need to use XHTML unless you're actually doing extensible markup. What bugs me, with all I (seem to?) know, a raw image by itself won't accept certain positioning attributes, I always have to wrap it in something.
What bugs me, with all I (seem to?) know, a raw image by itself won't accept certain positioning attributes, I always have to wrap it in something.
May be because IMG's are inline elements, not blocks?
#body {
margin: 0px;
}
There should be no "#", that is saying body is an element, rather than the body itself. It would be:
body {margin: 0px;}
I agree with the fact that they should be using standards, but I think looking at margins and knowing a page is centered only comes with experience so new users like to see "text-align:center;" so they can easily find where to change it if they want.
The problem is that IE has been pretty robust in that they follow standards but permit non-standards, thus allowing poor cross-browser coding.
It might not be standards compliant, but for those used to text-align:
body {
margin:0px;
text-align:center;
}
body {
text-align:-moz-center;
}#centereddiv {width:800px;}
This will center the DIV and text on the page all in once. Againt, it doesn't follow W3C standards. So use the margins as the first post suggested.
which one didn't work for you the one in the first post?
Your HTML should look something like:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title></title>
<style type="text/javascript">
body {
margin: 0px;
}
#centereddiv {
display: block;
margin: 0px auto;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div id="centereddiv">test</div>
</body>
</html>
To make IE5.5 and lower center, you'll need to add text-align: center on the body, then add text-align: left to the container to fix the text alignment. If you're not worried about that old a version of IE, you don't need the text-align stuff.
Display block is extraneous and not needed for centering a div.
I hope this is usefull for people who still use text-align for centering.
I agree with the fact that they should be using standards, but I think looking at margins and knowing a page is centered only comes with experience so new users like to see "text-align:center;" so they can easily find where to change it if they want.
Just to add, text-align is for centreing inline text, not blocks of content. It will not work to centre a content block in any standards compliant browser (inc. IE6+ in stds mode). However, it will (incorrectly) centre a block-level element in IE6+ (in quirks mode) and in IE5/5.5 (regardless of mode and which doesn't support
margin:0 auto;) as LadynRed states above.
