Re: [CSS3 box] Proposal: content-align

Thank you for this comprehensive view into the WG's work, Bert! So I
see, the problem is being adressed.

As a personal opinion from someone who uses CSS: My favorites are both
the ideas of margin:auto and vertical-align:center for blocks. That's
for one simple reason: Consistancy.

If you write vertical-align:..., you want the content to be aligned
vertically, irrelevant if it's an inline, table-cell or a block. The
same is with margin:auto. It works horizontally, so it's a continous
source of errors and annoyances, if it doesn't work vertically.

So please consider my proposal put on hold, for I'm curious to see what
the WG is going to develop.

Best Regards
Manuel


Bert Bos wrote:

>On Tuesday 12 September 2006 20:48, Manuel Strehl wrote:
>
>  
>
>>There was some time ago a discussion about vertical alignment of
>>block elements' content
>>( http://lists.w3.org/Archives/Public/www-style/2005Jun/0039 ).   I
>>looked through CSS 3
>>box model and haven't found anything to do this kind of job  (it IS
>>actually working for
>>
>>table cells with vertical-align in a quite similar way...):
>>    
>>
>[...]
>  
>
>>Therefore my proposal:
>>
>>Name:            content-align
>>Value:           [[<percentage> | <length> ]{1,2}
>>                    | [[top | center | bottom] || [left | center |
>>                    right] ]] | auto
>>    
>>
>[...]
>  
>
>>This property is somewhat similar to 'fit-position', just without the
>>'fit' part.
>>    
>>
>
>Vertically centering a block in another is a something the CSS WG wants 
>to allow in CSS3, but there is no decision yet as to how. There are 
>various proposals.
>
>As you said, it already works for table cells, so one way to vertically 
>center a block, even with only CSS2 properties, is to convert the outer 
>block to a table cell with 'display: table-cell' and then use 
>'vertical-align' on it. That works in several cases, but sometimes you 
>cannot use tables without breaking something else.
>
>    DIV {display: table; width: 100%; height: 20em}
>    P {display: table-cell; vertical-align: middle}
>
>    <DIV>
>      <P>This para is vertically centered in a block of 20 em high.
>    </DIV>
>
>In CSS3, there will be vertical text and even mixed vertical and 
>horizontal text. In vertical text, the roles of width and height are 
>almost completely interchanged and thus you can vertically center a 
>block with 'margin-top: auto; margin-bottom: auto'. We haven't 
>investigated if this covers all cases that the table-based solution 
>above can't handle.
>
>    DIV {block-progression: rl; height: 20em}
>    P {block-progression: tb; margin: auto}
>
>    <DIV>
>      <P>This para is vertically centered in a block of 20 em high.
>    </DIV>
>
>One other proposal is to add a value 'center' to the 'position' 
>property, which would cause the element to be both vertically and 
>horizontally centered in its containing block. You would set 'position: 
>relative' on the block that is to act as the containing block.
>
>    DIV {position: relative; height: 20em}
>    P {position: center}
>
>    <DIV>
>      <P>This para is vertically and horizontally centered in a block of
>        20 em high.
>    </DIV>
>
>Yet another proposal is to generalize the 'vertical-align' property, so 
>that it not only applies to inline elements and table cells, but also 
>to arbitrary blocks:
>
>    DIV {height: 20em}
>    P {vertical-align: center}
>
>    <DIV>
>      <P>This para is vertically centered in a block of 20 em high.
>    </DIV>
>
>XSL has a property 'display-align', which works like 'vertical-align', 
>but for blocks (as in the example above). We could borrow that property 
>for CSS:
>
>    DIV {height: 20em}
>    P {display-align: center}
>
>    <DIV>
>      <P>This para is vertically centered in a block of 20 em high.
>    </DIV>
>
>And as Manuel mentioned, the 'fit-position' property is proposed in CSS3 
>for images that have a different size than the box they are in. (That 
>cannot happen in CSS2, but the 'fit' property in CSS3 allows an image 
>to keep its aspect ratio even if *both* 'width' and 'height' are set.) 
>That property could maybe apply to block-level elements as well as 
>images. Additionally, if the element overflows, the property could set 
>the initial position of the scrollbar.
>
>    DIV {height: 20em}
>    P {fit-position: 50% 50%}
>
>    <DIV>
>      <P>This para is vertically centered in a block of 20 em high.
>    </DIV>
>
>Or, as in Manuel's proposal, 'fit-position' could be called 
>'content-align'.
>
>
>
>Bert
>  
>

Received on Friday, 15 September 2006 11:04:35 UTC