4 ms·
It took us 20 years for a simple way to center items vertically. I mean, COME ON.
by papito 6y ago
It took us 20 years for a simple way to center items vertically. I mean, COME ON.
- rimliu 6y agoIt took half of that. display:table-* have been available for more than ten years already.
- tobr 6y agoIt will take another 20 years for people to stop complaining about it retroactively.
- roq 6y agoIt will take more another 20 years for people to stop commenting about this.
- ranza 6y agoLets take some time to remember table layouts and blank.gif
- tobr 6y agoHN is certainly an appropriate place to remember those. Although, here it’s s.gif. https://news.ycombinator.com/s.gif https://news.ycombinator.com/s.gif
- open0 6y agoNo need to remember, look at the source of this website.
- klibertp 6y agoAnd frames. And tables with iframes. And, indeed, 1x1.gifs. Fun times!
- memco 6y agoAnd rounded corners!
- sodapopcan 6y agoYep, it makes no sense, especially since <td valign="middle"> worked flawlessly. Of course maybe there is some good explanation... I certainly never contributed to the CSS spec.
- chrisandchris 6y agoFor what I know the main argument against td is that tables are for data, not for layout.
- sodapopcan 6y agoRight, I’m not arguing for using it, I’m pointing out that easy vertical alignment has existed in some form since the 90s, so why did it take so long for a semantic version to make it into CSS? (ie, not the display:table version in the sibling comment)
- goto11 6y agoWhat do you mean "semantic"? CSS is for presentation, not semantics.
- sodapopcan 6y agoLike, before the best way to do it in CSS was the change the display type of an element to a “table cell” even if it’s not a part of a table. I mean, changing it to “flex” or “grid” doesn’t make much sense either, really, I rather just have a box with vertically aligned content. I dunno, am I using the word semantic wrong?
- goto11 6y agoOK I agree it was not intuitive to change the display-type to table-cell just in order to vertically center content. It basically mirrored how you would would vertically center in presentational HTML, except you didn't need to misuse the semantics of the table element (which is why I was initially confused by your comment about semantics.) The flex-box approach is the most intuitive in my opinion. The flex display-type basically means you want to distribute the area of a box among its immediate child elements, and control how the children and aligned relative to the container and each other. Centering is naturally part of this. Using grid is IMHO less intuitive, since a grid with a single cell seem just as much a hack as a table with a single cell.
- agumonkey 6y agothat's because half the planet's brain are trying to make printers work