[css-align] Vertical alignment for Grid/Flex items content

[radogado]

It seems columns' content can only be aligned vertically with an extra wrapper. Without a wrapper inline-block children become blocks. Adding a wrapper is a workaround and a step backwards from table-cell.

Demo: https://codepen.io/radogado/pen/xXRJYE

Vertical alignment is extremely important and a bane to CSS for ages. Is there another method that I'm missing, or the spec should be changed?

Thanks.

[tabatkins]

All children of a flexbox become flex items (raw text gets wrapped in an anonymous flex item). This is intentional, and allows many good effects.

It does mean, as you discovered, that you can't use a Flexbox or Grid to center mixed inline content of an element. Right now, you need a wrapper for that. The Align spec defines how the alignment properties should work on display:block, tho, and when browsers implement that, you'll be able to vertically center the contents of a block element directly.