W3C home > Mailing lists > Public > www-style@w3.org > January 2004

position: center (Was: valign=center-style alignment in CSS3?)

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>
Message-ID: <Pine.LNX.4.58.0401261302170.20382@dhalsim.dreamhost.com>

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 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Monday, 27 April 2009 13:54:25 GMT