undefined | Better HN

0 pointsJimDabell2y ago0 comments

> You've been able to do exactly what you describe (i.e. putting "hello" squarely in the middle of a 600x600 yellow box) with CSS since its first incarnation, with e.g. the `valign` HTML attribute corresponding to the `vertical-align` CSS property on an `inline`, `inline-block` or `table-cell` box.

display: table-cell came along with CSS 2.0 (1998), and display: inline-block came along with CSS 2.1 (2011).

Unfortunately, there were huge amounts of CSS 2.0 that weren’t supported by Internet Explorer 6 (2001), and there was a five year gap until Internet Explorer 7 was released in 2006, which didn’t improve CSS support much (basically just support for a few selectors was added). It took until Internet Explorer 8 was released in 2009 before it supported the eleven-year-old CSS 2.0 properly. And after that point, web developers had to wait years before enough people had upgraded that it became possible to drop support for Internet Explorer 7 and below and start relying upon display: table-cell etc.

So even though CSS had display: table-cell in 1998, web developers couldn’t actually use it until after ~2011 or so. But still, that was 13 years ago now – time to stop beating the “Centring in CSS is difficult” drum.

0 comments

filleduchaos2y ago

Yeah - I was squishing together the current state of things with the original. Maybe a clearer way to phrase that would have been that CSS has been able to vertically align elements like `valign` on a td does given a compatible display from day one, with the compatible displays starting with `inline` and eventually including `inline-block` and `table-cell`.

sodapopcan2y ago

Sure but we were told to move from tables to divs and "just use table-cell if you want vertical align" was not a great story nor was is discoverable to those had no prior context of table layout.

j / k navigate · click thread line to collapse