Re: positioned elements: center

On Jan 5, 2008, at 10:30 PM, James Elmore wrote:

>
> On Jan 5, 2008, at 5:02 PM, 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.
>>
>>
>
> I posted something about this on November 6th. Alignment/ 
> positioning is a complex subject, but basically the user needs to  
> either:
>
>     set the margins of an object (to 'auto' for centering, for  
> example)
>
> or
>
>     pick a point in the block being positioned, name another block  
> (the parent, for example) and pick a point in that block as well.

I was speaking specifically about absolute positioning, and how handy  
it would be if you could specify the position of the center, instead  
of just the edges. I know there are other ways to get things aligned,  
and other ways to think about alignment. But it would be such a  
simple thing to align elements by their centers (when  
position:absolute is OK or even preferred), especially when you don't  
know the exact height or width or position of the edges. And I think  
it would be cake to implement quickly, for a great benefit.

> Edges can also be aligned/positioned. In this case, it takes  
> specifying two (adjacent) edges of the positioned block and two  
> (adjacent) edges of the other (possibly parent) block to complete  
> the positioning. Simple defaults can make this specification much  
> simpler.
>
> In some cases, it makes sense to set margins to position an  
> element, in others it is clearer (at least to me) to speak in terms  
> of aligning points or edges. Both ways can be equivalent --  
> aligning the center point of an element with the center point of  
> its parent block is essentially the same as setting margins on all  
> four sides of the centered element to 'auto.' If we decide to allow  
> alignment/positioning by aligning points/edges as well as by  
> setting margins, it would allow users different ways of doing the  
> same thing. This makes using CSS easier, as some positioning is  
> easier to understand in terms of margins (1.0in, 1.0in) and some is  
> easier to understand in terms of aligning with another element  
> (align center to center is much clearer to me than 'margin: auto  
> auto auto auto;') As for implementors, I can see that they might  
> decide to implement all alignments in terms of margin sizes, and  
> just translate any positioning instructions into margin changes, or  
> the reverse.

That all sounds interesting, but like something that might take a  
while to work out all the details on, and possibly complicated to  
implement, assuming it doesn't break existing pages. I'm not opposed  
to exploring that more.

But the thing is, for position:absolute, at least, we already have a  
value that sets positions to the middle. That value is "50%". But the  
fact that it only works on edges and not centers makes it more  
complicated than it could be if we were able to set it on the center  
point. And "center" is something that everyone can understand right  
away. If a person is at all familiar with position:absolute, then the  
idea of { position:absolute; center-x:50%; center-y:50%; } would be  
extremely easy to understand, with little or no explanation. All  
other aspects of position:absolute would remain virtually unchanged.