The 'block-vertical-align' property

Value:    top | middle | bottom | auto | inherit
Initial:   auto
Applies to:   block-level elements, table cells and inline blocks
Inherited:   yes
Percentages:   N/A
Media:   visual
Computed value:   the initial value or as specified

This property describes how block-level content of a block is aligned vertically. Values have the following meanings:

top, middle, bottom
Child blocks are aligned at top, middle or bottom of their containing block respectively.
Child blocks are stacked in the direction of block progression.

Note. Justify is another possible value. It is hard to implement though, especially in presence of floats

Note: should 'start' | 'end' values be included also?

Elements with 'block-vertical-align' value other than 'auto' establish a new block formatting context. Content of such block is formatted as follows:

  1. Content is laid out as a regular sequence of blocks.
  2. If margin box of the content is bigger in block-progression direction than its container's content box, 'block-vertical-align' value has no further effect.
  3. If margin box of the content is smaller in block-progression direction than its container's content box, the content is shifted in block-progression direction to align with top, middle or bottom of the container.

When this property is applied to a table cell (or any other element supporting vertical-align in this version of CSS, e.g. table-cell), this property takes priority over 'vertical-align'.

In paged media and in multi-column layout, page breaks are calculated first, then the content is vertically aligned according to the property within each portion of the parent block.

Issue: What is the set of values applicable to vertical layout? Should block-align and block-vertical-align be physical and switch their meaning in vertical? Or should they be logical?