Align a div using CSS
I have the following defined in my css file:
body {
text-align: center;
float: right;
position: fixed;
}
.twoColFixRtHdr #container {
width: 780px;
margin: 0 auto;
border: 1px solid #000000;
text-align: left;
}
and I have my HTML defined as follows:
<body class="twoColFixRtHdr">
<div id="container">
<div id="header">
The problem is, in IE (all versions I've been able to check) center the content of the page, but in Firefox, it's left-aligned. I know that text-align:center will center the content of the element, but not the element itself, so you have to nest your content, which is what the extra div is for. But I m开发者_如何学Cust be missing something about the differences between IE and Firefox in terms of how it renders this tag.
Any ideas? You can look at the site: http://www.solar-fit.ca
these two cause the problem
body -> float: right; position: fixed;
remove those
You tried this yet?
#container{
width: 780px ;
margin-left: auto ;
margin-right: auto ;
}
You shouldn't need the nested div with this approach. According to the source ...
"The code above has been tested with IE 6, 7, Firefox, Opera and Safari."
How about putting margin: 0px auto; in body ?
Not sure about the cause, but a fix is putting IE into standards mode via a DOCTYPE, e.g.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
body {
text-align: center;
float: right;
position: fixed;
}
.twoColFixRtHdr #container {
width: 780px;
margin: 0 auto;
border: 1px solid #000000;
text-align: left;
}
</style>
</head>
<body class="twoColFixRtHdr">
<div id="container">
<div id="header">
Some text goes here
</div>
</div>
</body>
</html>
Remove the float and position properties from the body rule and add 100% width.
body { text-align: center; width: 100% }
加载中,请稍侯......
精彩评论