Re: [CSS3 box] Proposal: content-align

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
-- 
  Bert Bos                                ( W 3 C ) http://www.w3.org/
  http://www.w3.org/people/bos                               W3C/ERCIM
  bert@w3.org                             2004 Rt des Lucioles / BP 93
  +33 (0)4 92 38 76 92            06902 Sophia Antipolis Cedex, France

Received on Thursday, 14 September 2006 17:32:41 UTC