Re: positioned elements: center

On Jan 8, 2008, at 10:45 AM, Brad Kemper wrote:

> 'center-y'
> Value:
> <length> | <percentage> | auto | inherit
> Initial:
> auto
> Applies to:
> positioned elements
> Inherited:
> no
> Percentages:
> refer to height of containing block
> Media:
> visual
> Computed value:
> for 'position:relative', see section Relative Positioning. For  
> 'position:static', 'auto'. Otherwise: if specified as a length, the  
> corresponding absolute length; if specified as a percentage, the  
> specified value; otherwise, 'auto'.
> Like 'top', but specifies how far a box's center is offset below the  
> center of the box's containing block. For relatively positioned  
> boxes, the offset is with respect to the center of the box itself.  
> Note: For absolutely positioned elements whose containing block is  
> based on a block-level element, this property is an offset from the  
> padding edge of that element.
>
> 'center-x'
> Value:
> <length> | <percentage> | auto | inherit
> Initial:
> auto
> Applies to:
> positioned elements
> Inherited:
> no
> Percentages:
> refer to width of containing block
> Media:
> visual
> Computed value:
> for 'position:relative', see section Relative Positioning. For  
> 'position:static', 'auto'. Otherwise: if specified as a length, the  
> corresponding absolute length; if specified as a percentage, the  
> specified value; otherwise, 'auto'.
> Like 'top', but specifies how far a box's center is offset to the  
> right of the center of the box's containing block. For relatively  
> positioned boxes, the offset is with respect to the center of the  
> box itself. Note: For absolutely positioned elements whose  
> containing block is based on a block-level element, this property is  
> an offset from the padding edge of that element.
>
>

These are problematic. 0% on each centers the element? So if I want it  
to the left or above center, I have to use negative numbers? I don't  
like that. Offsetting the center of an element is nice, but it should  
be offset from the top, so that center: 50% centers the thing. For an  
element that is height:10%, setting center-y:5% should have the top  
edge lined up with that of the parent element. This seems more  
intuitive for me.

John Oyler
john@discrevolt.com