I try to center a div
on my page. It should use just relative values, so its size depends just on the window size.
body
gets bigger then the window. In the following example firebug tells me that the box #container
has size 1265x335 on my screen. When inspecting #content
its size is 506x134 and 2px boarder on each side, which matches my calculation. But the top margin is 316.开发者_StackOverflow社区
Have I got something wrong?
The margin should be 25% of 335, right? How can I fix this?Here's the HTML:
<body>
<div id="container">
<div id="content">
nothing...
</div>
</div>
</body>
And here the CSS:
html {
height: 100%;
}
body {
height: 100%;
margin: 0em 0em 0em 0em;
}
#container {
height: 100%;
}
#content {
text-align: center;
width: 40%;
height: 40%;
margin-top: 25%;
margin-left: auto;
margin-right: auto;
margin-bottom: auto;
border: 2px solid black;
}
From http://www.w3.org/TR/CSS2/box.html:
The percentage is calculated with respect to the width of the generated box's containing block. Note that this is true for 'margin-top' and 'margin-bottom' as well.
So you get 25% of 1265 which explains the behavior you are seeing. Unfortunately, I don't have any solutions to offer.
Edit: CSS3 makes this statement dependent on whether the containing block is horizontal (you would want it to be vertical). I don't think that any browsers implement the required block-progression
property however (it might have unintended side-effects anyway).
精彩评论