Re: positioned elements: center

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.

Received on Tuesday, 8 January 2008 14:52:25 UTC