Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Absolute Horizontal And Vertical Centering In CSS

coding.smashingmagazine.com

Post reply on HN
Print view View original

21–30 of 62 posts

Re: Absolute Horizontal And Vertical Centering In CSS

#21

Post by eeeeaaii »

I personally think it's just incredible that vertical centering in CSS has been so woefully neglected over the 16 years we've had CSS. Every time I read another article about how somebody just maybe has figured out a kludgy way to vertically center things with CSS, I just shake my head. Aren't there any graphic designers on any of the W3C working groups surrounding CSS? Back in the old days when everything was a table-based layout, there was a clean, one-to-one mapping between the grid framework that your graphic designer created and the code underlying the page.

Then the semantic web pedants came along and decreed that tables shall never be used for layout. Fine -- but nobody ever bothered to come up with a DIVs+CSS replacement for the grid-based layout that any serious graphic designer uses to build a page.

And do you know what happened to the web? Debate cause and effect all you want, but webpage designs are far more boring now than they were 10 years ago. Now it's all just blocks of large-print scrollable text, some images here and there (or maybe a wall of them), and a cute logo. It's like everything is a Geocities page with better fonts and color choices, minus the gifs. I feel like I never see anything really cutting edge or creative in the design space on the web.

The internet is a really young medium of course, and it will naturally go through phases, where certain types of design come into fashion while others go out. And I would love it if somebody would prove me wrong by posting some links to some really kick-ass-looking sites. But from where I'm sitting these days, from a design perspective the web is a big yawnfest. Maybe today's websites are more usable and easier to index and work well on a screen reader, but from a graphic design perspective... zzzzz....

Re: Absolute Horizontal And Vertical Centering In CSS

#25

Post by Pxtl »

pmichaud wrote: post #6

The fact that this is an interesting article is a huge indictment of CSS. It was developed for a different, simpler use case, and it's obviously the wrong abstraction at this point. Too bad it's entrenched.

Yup. Easy things easy and hard things possible, like Wall always says. Centring a box in the middle of the page sounds "easy".

Re: Absolute Horizontal And Vertical Centering In CSS

#27

Post by Pxtl »

gcv wrote: post #19
JakeSc wrote: post #13

Earlier quoted context omitted.

Do you have a better suggestion? I agree with your frustration about this article being newsworthy (it's 2013! How are we still figuring out vertical centering?!), though I would argue that CSS is great for its original use case and certainly has its place today. Why is it bad that CSS is entrenched in the Web? Like any development technology, CSS has a learning curve and has several shortcomings (like vertical posit…

CSS is not great for its original use case. It was poorly designed by a group of people who chose to ignore existing understanding of layout models. The TeX boxes+glue model, had it been adapted for CSS, would have made all the absurdities and nasty layout workarounds of the last 20 years unnecessary.

I like to point to the failure of keeping table headers visible at the top of a page as you scroll down a table. If I had a book where a table spanned multiple pages and the header row wasn't included at the top of the page, I would throw the book out.

A scrollable table with fixed headers is something that Visual Basic supported in 1997.

Re: Absolute Horizontal And Vertical Centering In CSS

#28

Post by cletus »

The history of CSS is one where Microsoft earned an awful lot of bad will and what an epic fail the W3C has been in this regard.

Microsoft of course deviated from the nascent "standard" such that we've been burdened for years with "if IE ..." blocks to the point that the latest version of IE pretends not to be IE.

You reap what you sow.

But every time I come across the issue of "how to vertically center in CSS", an issue that has existed for years, I get angry. I get angry because the old way (vertical alignment on table cells) just works. As much as the CSS purists (some might call them "anti-table zealots"), it's hard to argue with something that works all the way back to IE4 and probably beyond (well valign="middle" probably does, CSS vertical-align: middle is probably IE5/6).

But beyond this there are so many things in HTML/CSS that should be simple but are hard. This is just one of them.

Consider spacing between table cells. There's (still) actually no way to do this... if you want no spacing between the leftmost and rightmost cells and the edge of the table, which I find is a pretty good use case. People end up doing things like:

    td { margin-right: 0.3em; }
    td:last { margin-right: 0; }
Any such solutions had varying backwards compatibility issues, a problem we're now largely getting behind us, but still...

Why can't I specify (separately if need be) the vertical and horizontal spacing between cells separately to the edge of the table (which should really be a property of the table rather than the cells IMHO).

The problem here is that the CSS WG seems to have started with a model and then just run with it without running it through very common use cases.

Looking at the article, it looks fine. One thing I'll say is it starts off with the "margin: 0 auto" trick, which everyone who does anything with CSS needs to know. Why is centering that hard? Why can't I just say "put this in the center"? Why can't I then use margins to offset from center or something?

Also FWIW, the margin: 0 auto thing didn't work in older versions of IE if you didn't specify a DOCTYPE and force "standards compatibility mode" (rather than the euphemistic "backwards compatibility mode".

Re: Absolute Horizontal And Vertical Centering In CSS

#29

Post by Aldo_MX »

gcv wrote: post #19
JakeSc wrote: post #13

Earlier quoted context omitted.

Do you have a better suggestion? I agree with your frustration about this article being newsworthy (it's 2013! How are we still figuring out vertical centering?!), though I would argue that CSS is great for its original use case and certainly has its place today. Why is it bad that CSS is entrenched in the Web? Like any development technology, CSS has a learning curve and has several shortcomings (like vertical posit…

CSS is not great for its original use case. It was poorly designed by a group of people who chose to ignore existing understanding of layout models. The TeX boxes+glue model, had it been adapted for CSS, would have made all the absurdities and nasty layout workarounds of the last 20 years unnecessary.

> It was poorly designed by a group of people who chose to ignore existing understanding of layout models.

Can you please elaborate how tables were the understanding of layout models 15 years ago?

The web was not thought to be interactive at that era, but to be printed, it's not the fault of the old specs that the web progressed significantly fast.

Re: Absolute Horizontal And Vertical Centering In CSS

#30

Post by svachalek »

untog wrote: post #18
pmichaud wrote: post #6

The fact that this is an interesting article is a huge indictment of CSS. It was developed for a different, simpler use case, and it's obviously the wrong abstraction at this point. Too bad it's entrenched.

There's nothing wrong with CSS the language . There are missing properties that could be better implemented, and hopefully future browsers will do so. But CSS is still a fine base to work from. That said, I use LESS. But while everything compiles down to CSS, it doesn't impact me much.

I think I can counter that in two words: specificity hierarchy.
Post reply on HN