Re: Alignment property proposal

Anne van Kesteren wrote:
> 
> On Wed, 26 Dec 2007 09:44:44 +0100, Anne van Kesteren <annevk@opera.com> 
> wrote:
>> I think it would be good if one of these features exactly matches the 
>> behavior of <center>. (I thought that was the idea behind the 
>> proposal, at least for some proponents.) It seems that WebKit and 
>> Gecko have implemented that as text-align:-webkit-center and 
>> text-align:-moz-center respectively. Maybe we should introduce 
>> block-center as a value for text-align.
> 
> As for vertical centering and horizontal centering in general, I think 
> we should more seriously look into the flexible box model as featured by 
> XUL. Maybe combining it with the Advanced Layout Module in some way as 
> Roc suggested if that's at all feasible. I think that would solve a 
> bunch of layout issues people are currently running into and hacking 
> around using 'float', 'position', and probably script.
> 
> 

XUL flexes are not so suitable for CSS as they describe only 
width/height of elements but for aligning purposes you need flexes
to be applied to margins for example.

For CSS it is better to use so called "flex units" [1,2]:

Following will replace blocks vertically (as usual) and center them 
horizontally:

body
{
   flow:vertical;
}
body > *
{
   margin-left; 1*;
   margin-right; 1*;
}

and this:

body
{
   flow:horizontal;
}

body > *
{
   margin-top; 1*;
   margin-bottom; 1*;
}

will replace blocks in single row and center them vertically.

And this:
body
{
   flow:horizontal;
}

body > *
{
   margin-top; 0;
   margin-bottom; 0;
   height:1*;
}

will replace blocks in single row and make their height equal to each 
other - to the height of tallest element in the row (similar to cells in 
single row table).

-- 
Andrew Fedoniouk.

http://terrainformatica.com

[1] 'flex' units:
http://www.terrainformatica.com/htmlayout/fspu.whtm
[2] The 'flow' attribute: 
http://www.terrainformatica.com/htmlayout/flow.whtm

Received on Thursday, 27 December 2007 05:29:18 UTC