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

(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