Hacker News Reader

Hacker News

Comment by papito | Hacker News Reader

Parent Full thread

papito

It took us 20 years for a simple way to center items vertically. I mean, COME ON.

View on HN

It will take another 20 years for people to stop complaining about it retroactively.

It will take more another 20 years for people to stop commenting about this.

Lets take some time to remember table layouts and blank.gif

And frames. And tables with iframes. And, indeed, 1x1.gifs. Fun times!

And rounded corners!

HN is certainly an appropriate place to remember those. Although, here it’s s.gif.

https://news.ycombinator.com/s.gif

No need to remember, look at the source of this website.

Yep, 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.

For what I know the main argument against td is that tables are for data, not for layout.

Right, 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)

What do you mean "semantic"? CSS is for presentation, not semantics.

Like, 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?

OK 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.

Yep, I do agree that of any of them, flex makes the most sense from a language standpoint.

We generally don't remember how bad the internet search was before Google came along, but it was really, really bad. I have zero evidence but I'm pretty sure that some time ago some industry heavyweights asked themselves "Why the search in the apps works fine but the internet search is broken? Is it because the apps have the intimate knowledge of the structure of their data and the search engines don't? Shouldn't we convey to them that structure?". Thus the idea of the Semantic Web was born, using tables for layout became cardinal sin and we entered the long Dark Age of trying to wrestle floats into doing something they never could really do. Then along came Google and made it all obsolete, but the priests of Semantic Web had too much fun torturing mere mortals that they stretched the Dark Age up until the adoption of the Grid Layout. When I hear someone saying that tables are for data and should not be used for layout I want to punch them. Yes, I've been that bitter for two decades.

Haha, ya, in the end, tables are still the simplest to reason about when it comes to layout! I kept using them long past when we weren't supposed to since the whole float thing was a mess and compatibility was still a big issue.

While it's a ton of markup, tables are build upon a few easy-to-remember concepts and you can do anything (including vertically align without googling!). I'm still constantly looking up flex and grid rules.

That said, I did move on.

You can do the similar in pure CSS with:

   foo { display: table-cell; vertical-align: middle; }

And it has also worked a lot longer than the flex-approach. But now when flex is available it seem the more appropriate tool for the job.

It took half of that. display:table-* have been available for more than ten years already.

that's because half the planet's brain are trying to make printers work

Reply on news.ycombinator.com