- From: Gérard Talbot <www-style@gtalbot.org>
- Date: Sat, 22 Jun 2013 15:13:56 -0400
- To: "Glen Huang" <curvedmark@gmail.com>
- Cc: "W3C www-style mailing list" <www-style@w3.org>
Le Ven 21 juin 2013 1:39, Glen Huang a écrit : > Not sure if this question is qualified to be asked here. It's my desire to > find the rules in the CSS spec, which I failed to, that are responsible > for the effect that I describe bellow. So I feel it's somewhat > spec-related. Hope it's OK to ask here. > > Example: http://jsbin.com/ocadip/1/edit > > By putting a relatively positioned box inside an absolutely positioned > box, I was able to horizontally center a box that has a variable width, > but this method failed to work vertically. All major browsers I tested > refuse to center it vertically. > > I have gone through the CSS2.1 spec multiple times, but couldn't find the > responsible rules. Since all major browsers behave consistently on this > one, I'm pretty sure I missed some rules. I'm wondering which ones. > > Thanks for the help. > > Glen Glen, "Percentages: refer to height of containing block" Percentage values for the 'top' property are relative to the element's containing block. "The offset is a percentage of the containing block's width (for 'left' or 'right') or height (for 'top' and 'bottom')." coming from CSS 2.1, Section 9.3.2 Box offsets: 'top', 'right', 'bottom', 'left' http://www.w3.org/TR/CSS21/visuren.html#position-props So, you must first find out what is div#d2's containing block and then such containing block's height. "if the element's position is 'relative' or 'static', [then] the containing block is formed by the content edge of the nearest block container ancestor box." coming from CSS 2.1, Section 10.1 Definition of "containing block" http://www.w3.org/TR/CSS21/visudet.html#containing-block-details So, div#d1 is the containing block of div#d2 "If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, [then] the [height] value computes to 'auto'." coming from CSS 2.1, Section 10.5 Content height: the 'height' property http://www.w3.org/TR/CSS21/visudet.html#the-height-property In your test, div#d1's height is not specified explicitly; it depends on its own content. Your test should specify which point exactly should be horizontally centered and vertically centered: it could be the top-left corner of the red square or it could be the horizontal center and the vertical center of the red square itself. div#d1 had its top-left corner already horizontally centered and vertically centered. Gérard -- CSS 2.1 Test suite RC6, March 23rd 2011 http://test.csswg.org/suites/css2.1/20110323/html4/toc.html Contributions to CSS 2.1 test suite http://www.gtalbot.org/BrowserBugsSection/css21testsuite/ Web authors' contributions to CSS 2.1 test suite http://www.gtalbot.org/BrowserBugsSection/css21testsuite/web-authors-contributions-css21-testsuite.html
Received on Saturday, 22 June 2013 19:14:28 UTC