- From: François REMY via GitHub <sysbot+gh@w3.org>
- Date: Tue, 16 Jul 2019 21:24:02 +0000
- To: public-css-archive@w3.org
Vertical-align works the same way for table cells in a table row as if you took all the cells of the row, - made them inline-block, - set their width to be the width of the column they are in, - set their height to auto, - then let vertical-align apply normally as in any flow block. Here is an example: https://jsfiddle.net/3jp2nwoy/ The only difference is that with table rows, you add padding to the cells so that their top and bottom sides meet the full row height (without shifting their content box) while for a normal flow line, you just leave blank space on either side of the line block. If you have boxes without background and border, are nothing positioned relatively to them, there is no difference between a table-cell row and an inline-block flow regarding how vertical-align works. Otherwise, the added padding has some impact. Here is the same example but with support for proper background/border/etc (addition of padding-top/padding-bottom to meet the row height after alignment, assuming things have roughly the same height as on my machine): https://jsfiddle.net/3jp2nwoy/1/ ----------------- Now, you are correct that there is no way to visually center the content of an inline-block or block in its block axis if that block axis does not happen to match the parent one. That's a limitation of flows in general, not of table cells (which are more or less a block). My impression is that what you are trying to achieve is to add a `align-content` / `justify-content` on the table cell. The only problem is that those properties do not apply to regular blocks as far as I can recall, only to flex and grid. But maybe they should? That would be an issue against another spec however. The internal layout of a table-cell is just the layout of a block, so you would want to modify css-align to interact with blocks. cc @fantasai since she's the expert wrt css-align -- GitHub Notification of comment by FremyCompany Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/4033#issuecomment-511993353 using your GitHub account
Received on Tuesday, 16 July 2019 21:24:04 UTC