W3C home > Mailing lists > Public > www-style@w3.org > February 2014

[css] about vertical-align on display:block elements.

From: Andrew Fedoniouk <news@terrainformatica.com>
Date: Sat, 1 Feb 2014 12:46:14 -0800
Message-ID: <CALRQH79Dewc3_241ir8t-Xyj0r1JPyOCpUFLpNW3GHstJcynDA@mail.gmail.com>
To: "www-style@w3.org" <www-style@w3.org>
(Sorry about revitalizing the horse)

For display:block elements,
what conceptually stops us from treating `vertical-align`
exactly in the same way as in display:table-cell ?

( In display:table-cell vertical-align defines alignment of
  content relative to element's box )

Currently vertical-align align in this setup:
{
  display:block;
  vertical-align:bottom;
  width:100px; height:100px;
}
is simply ignored. Example: http://terrainformatica.com/w3/valign.htm

In order vertical-align to work we need to change display to
{
  display:table-cell;
  vertical-align:bottom;
  width:100px; height:100px;
}
but that creates non desirable side effects due to peculiar
treatment rules of display:table-cell's.

If we will add support of  vertical-align for blocks then
we even can extend it to cover overflow cases:

Consider this illustration:
http://terrainformatica.com/w3/vertical-align-overflow.png

That is about the case when content overflows and
element uses overflow-y:hidden;

There are quite many practical cases where such alignment
behavior is highly required, think about sliding menus for example
(vertical transition from height:0 to height:min-content).

Another quite popular use case is log-alike lists like
console message list in dev tools:

#console-output {
    vertical-align:bottom;
    overflow-y:scroll;
}
in this case when user will not touch scrollbar on the list
it will auto scrolled to the bottom when new content will arrive.

I believe this functionality is so basic and asked for
so frequently that we should do something about it.

There is also a need for horizontal-align: left | center | right;
if we want to reproduce <center> behavior in CSS.
But that's probably another story.


-- 
Andrew Fedoniouk.

http://terrainformatica.com
Received on Saturday, 1 February 2014 20:46:41 UTC

This archive was generated by hypermail 2.3.1 : Monday, 2 May 2016 14:39:18 UTC