W3C home > Mailing lists > Public > www-style@w3.org > April 2010

Re: [CSS3] horizontal/vertical-align ?

From: Tab Atkins Jr. <jackalmage@gmail.com>
Date: Thu, 22 Apr 2010 19:58:05 -0700
Message-ID: <m2zdd0fbad1004221958zd4a3eedfuf88343e6ee51b2f@mail.gmail.com>
To: Andrew Fedoniouk <news@terrainformatica.com>
Cc: www-style@w3.org
On Thu, Apr 22, 2010 at 7:40 PM, Andrew Fedoniouk
<news@terrainformatica.com> wrote:
> Consider this markup:
>
> <p>One <span>two</span> three</p>
>
> With these styles:
>
> p { line-height:40px; }
> span
> {
>  height:10px;
>  border:1px solid;
>  display: table-cell;
>  vertical-align: bottom;
> }
>
> This style should force the span to behave as an inline-table (or table?)
> and the table-cell at the same time. As a table in inline context this
> element should use vertical-align: bottom; to align the block
> to bottom of line box. And as a table cell vertical-align: bottom
> instructs it to align content to the bottom.
> So either these display:table-*** things are conceptually wrong
> or assigning the same name (vertical-align) to completely different
> entities was very bad decision at that time.
> I suspect that both of them have design flaws.

No, it acts like a table-cell only.  It has an inline-table anonymous
wrapping box (along with at least a table-row wrapper, and maybe a
table-row-group?  I forget).

Thus, since it's a table-cell, vertical-align works as per tables.

(This is a potential use-case for either ::inside or ::outside, btw -
you could then use vertical-align both to align the box in the linebox
and to align the contents of the table-cell.)

I agree that reusing vertical-align to align the contents of a table
box was a design mistake.  But it's not something we can change at
this point, so shrug.  It's not contradictory in any way, though, just
occasionally inconvenient.


> 'direction' has no such thing as horizontal-align: center.
> 'direction' primarily defines text order. Yes it has side effect
> of behaving as if horizontal-align: right is defined when direction is 'rtl'
> and 'left' in case of 'ltr' but again carving this side-effect in the stone
> of specification was bad
> idea.  There are cases when you need to say:
>
> ul {   direction: rtl;
>  flow: horizontal;
>  horizontal-align: center;
> }

I agree, and Flexbox has some ability to do that now.  I expect that
I'll add a fuller ability to control this in my revision.

~TJ
Received on Friday, 23 April 2010 02:58:57 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:26 GMT