- From: Ian Hickson <ian@hixie.ch>
- Date: Mon, 26 Jan 2004 14:24:42 +0000 (UTC)
- To: Vincent Starre <thebitman@comcast.net>
- Cc: "www-style@w3.org" <www-style@w3.org>
On Sun, 25 Jan 2004, Vincent Starre wrote:
>
> what would position:center be relative to?
The containing block, as with position:absolute (see CSS2.1 section 10.1).
Here is an updated version of the position:center proposal. Comments
welcome.
position: center
----------------
With this proposal, the following rule:
body { position: center; }
...would be enough to center a typical HTML document in the viewport.
The 'center' positioning scheme is similar to the 'absolute'
positioning scheme. The 'top', 'right', 'bottom' and 'left' values are
still used, the only difference is that they cause the element to be
aligned in a way analogous to how 'background-position' aligns
backgrounds instead of the way position: absolute aligns elements.
The containing block for a position:center element is the same as for
a position:absolute element.
For 'left' and 'right', used values are calculated using the following
equality:
'left' + 'margin-left' + 'border-left-width' + 'padding-left' +
'width' + 'padding-right' + 'border-right-width' + 'margin-right' +
'right' = width of containing block
...and the following rules:
1. If both 'left' nor 'right' are lengths (not percentages or
'auto') then the element is horizontally positioning as if it
was set to 'position:absolute'.
2. Otherwise, if any of 'left' or 'right' are 'auto', they are set
to '50%'.
3. If any of 'margin-left' and 'margin-right' are auto, they
are set to zero.
4. If both 'left' and 'right' are set to a percentage:
2. If 'width' is 'auto', it is set to the shrink-wrap or
intrinsic width. If this results in an outer width wider than
the containing block width, then the width is set so that the
outer margin box width is equal to the containing block
width. If this results in a negative width, the width is set
to zero. If the resulting width is less than the minimum
width or the minimum shrink wrap width, it is set to that
minimum width.
3. If 'direction' is 'ltr' derive 'left' using the following
equation and 'right' using the equality above:
used value of left = left percentage * width of containing
block - max(left percentage * (margin-left + border-left
+ padding-left + width + padding-right + border-right +
margin-right), width of containing block)
3. Otherwise, 'direction' is 'rtl'. Do what is described in the
previous step (4.3) except using the 'right' property instead
of the 'left' property and vice versa.
5. Otherwise, if 'left' is set to a percentage, 'right' is a length:
1. If 'width' is not 'auto', the values are over constrained.
Ignore 'left' (regardless of 'direction') and use the
equality above to derive its used value.
2. Otherwise, 'width' is 'auto'. Derive 'left' and 'width' using
the equality above and the following constraints:
left = left percentage * width of containing block - left
percentage * (margin-left + border-left + padding-left +
width + padding-right + border-right + margin-right)
5. Otherwise, 'right' is a percentage and 'left' is a length. Do
what is described in step 4 except using the 'right' property
instead of the 'left' property and vice versa.
Analogously for the vertical direction and the properties 'top',
'bottom', 'height', etc. The horizontal calculations are performed
before the vertical ones (i.e. when resolving an 'auto' width, the
result will influence an 'auto' height, but not vice versa).
The 'overflow' property is used to control overflow.
The idea for this proposal originally came from Tantek.
--
Ian Hickson )\._.,--....,'``. fL
U+1047E /, _.. \ _\ ;`._ ,.
http://index.hixie.ch/ `._.-(,_..'--(,_..'`-.;.'
Received on Monday, 26 January 2004 09:26:01 UTC