Re: positioned elements: center

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.

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.


James Elmore