Re: positioned elements: center

On Jan 7, 2008, at 9:29 PM, Brad Kemper wrote:

>
>
> On Jan 7, 2008, at 11:36 AM, fantasai wrote:
>
>>
>> Brad Kemper wrote:
>>> I don't know if this subject has been broached before...
>>> Using absolute positioning to center an element is not as simple  
>>> as it should be. I can position the element by setting its top,  
>>> bottom, right, and left. But if I set "left:50%; top:50%;", but  
>>> to center the whole element (instead of just the top left corner)  
>>> I have to know its height and width, divide them in half, and use  
>>> them as negative margin. It would be much simpler if I could set  
>>> "*center-x:*50%; *center-y:*50%" instead of top, left, and  
>>> negative margin. I know there are a couple of other ways to get  
>>> the items to center, but they are no simpler, or have other  
>>> limitations. Being able to position items by center would be so  
>>> much simpler.
>>
>> There was a proposal for pretty much exactly this functionality  
>> quite awhile
>> ago, with slightly different syntax
>>   http://lists.w3.org/Archives/Public/www-style/2004Jan/0218.html
>>
>> ~fantasai
>
> That's pretty different from what I'm proposing. By the definition  
> given, position:center is a whole new positioning scheme, concerned  
> primarily with making sure the item is both vertically centered and  
> horizontally centered.
>
> What I proposed was a small, simple extension to position:absolute  
> (and position:fixed, and perhaps position:relative), which would  
> continue to work exactly as it did before, except that in addition  
> to setting the position of one or more of the four edges of the  
> object, you could set the position of the center of the object.
>
> It would not break any fundamental design principals. It would not  
> break incremental rendering, since positioned items are taken out  
> of the flow.
>
> "center-x" would work exactly like "left" and "right" to set the  
> horizontal position of an item. The implication of adding it to the  
> spec is that only two of the values would be usable per element.  
> Setting "left" and "center-x" positions together would imply the  
> position of the right edge, which would be calculated. Setting  
> "right" and "center-x" positions together would imply the position  
> of the left edge, which would be calculated. Setting all three on  
> an element would cause "center-x" to be ignored.
>
> "center-y" would work exactly like "top" and "bottom" to set the  
> vertical position of an item. The implication of adding it to the  
> spec is that only two of the values would be usable per element.  
> Setting "top" and "center-y" positions together would imply the  
> position of the bottom edge, which would be calculated. Setting  
> "bottom" and "center-y" positions together would imply the position  
> of the top edge, which would be calculated. Setting all three on an  
> element would cause "center-y" to be ignored.
>
> "center" would be shorthand for "center-x" and "center-y" (in  
> exactly the same way that "overflow" is shorthand for "overflow-x"  
> and "overflow-y"), when the author wishes to give them bother the  
> same value. Thus "center:2em;" is equivalent to "center-x:2em;  
> center-y:2em;".
>
> That's it. Simple as pie.
>


'top'
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'.
This property specifies how far an absolutely positioned box's top  
margin edge is offset below the top edge of the box's containing  
block. For relatively positioned boxes, the offset is with respect to  
the top edges of the box itself (i.e., the box is given a position in  
the normal flow, then offset from that position according to these  
properties). 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-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.