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

How to Center in CSS

howtocenterincss.com

Post reply on HN
Print view View original

181–190 of 297 posts

Re: How to Center in CSS

#181

Post by ajkjk »

pcwalton wrote: post #82
lisper wrote: post #38

The mere fact that a site like this can exist and not be a joke is proof that CSS is still badly broken. I should be able to center things by writing: foo { align: center; valign: center; }

You're in luck. foo { display: flex; /* opt into the new box model */ justify-content: center; /* "align" */ align-items: center; /* "valign" */ } Vendor prefixes may or may not ruin your day (for now), but the spec is there and is exactly what you want. CSS is no longer "badly broken" if that's your metric.

I think I'd still CSS is badly broken, until this is available everywhere.

Re: How to Center in CSS

#182

Post by TeMPOraL »

rimantas wrote: post #145
cyphunk wrote: post #76

Earlier quoted context omitted.

I have not found a project yet that I could divorce the layout from the content without the use of javascript. i gave css many attempts at this. mainly from the desire to make the content easy to manage for others. or just for aesthetics. but css was (is) too clunky to make that separation. yet people still argue that not limiting yourself to what css can provide you, thereby giving up on the purity of content vs lay…

I think CSS Zen Garden still exists...

And this is absolutely the only place where "separation of content and layout" works. In real world, layout often is a part of content - but instead of accepting that, a lot of developers like to proclaim that their code is soo semantic, and the metric ton of grid layout divs in their "content" is not tables in disguise, but definitely has some important semantic meaning...

Seriously, I don't know what's more broken - CSS itself or the web developer community, with the amount of self-deception, cargo-culting and stockholm syndrome cases present there.

Re: How to Center in CSS

#183

Post by TeMPOraL »

robin_reala wrote: post #173
tokenizerrr wrote: post #163

Earlier quoted context omitted.

People who disable features of their browser on purpose will always be getting a degraded experience. No way around that.

People have JS disabled without their intent. Corporate security standards, broken JS in CDN served libraries, mobile proxy browsers, the list goes on…

With the rate CSS is accumulating kludges and the fact that, when together with HTML5, it has already crossed the Turing-completeness threshold, I wonder how long it will take before companies start requiring browsers to disable subsets of CSS...

Re: How to Center in CSS

#184

Post by frevd »

baddox wrote: post #124
nikanj wrote: post #106

Earlier quoted context omitted.

A basic rule of universe is that complexity remains, you can merely shift it around. The table layout algorithm might be incredibly complex, but I'd rather have a browser writer have the headaches than me.

> A basic rule of universe is that complexity remains, you can merely shift it around. Not really. CSS grid systems (like in Bootstrap) require some ugly and non-semantic markup, but they're not very complex.

No, what he really meant by complexity is information content - will always remain - you can compress it (akin to writing complex code) or uncompress it (akin to writing more code), but whatever you wanted to express you'll still have to express. This principle you can also find in all domain specific languages and in all frameworks that started out as easy and lightweight and become groteskly inflexible and ugly monstrosities after a while when the rest is being added to make them complete in all respects.

Re: How to Center in CSS

#185

Post by TeMPOraL »

lisa_henderson wrote: post #90
supercoder wrote: post #55

Earlier quoted context omitted.

I also find it crazy how there was a huge campaign to remove use of the table tag for layout. 'It's non semantic! You're mixing layout and content!' people would cry over and over. .. But then we've ended up with bootstrap and it's grid layout, where we're doing exactly that, and for some reason it's perfectly fine.

Thank you for saying that. The last 15 years have seen tremendous heat and noise exhausted in fantastical debates the end result of which brings no obvious improvement. If we were honest, we would say something humble, such as "Sir Tim Berners-Lee is a great genius, and we are all grateful for what he gave us in 1989, however, since that time, we have learned many things, and the technologies proposed then did not gi…

> But we now realize these two goals would be better served by two separate technologies, and HTML should be retired."

This. And the confusion around those two goals is what drives a lot of useless arguments with people who have Stockholm syndrome towards HTML and CSS. Those arguments can often be summarized like this:

- Hey, we're complicating things too much, how about just focusing on rendering a text communicating a message?

- No no no, the web is not just about documents, it's so much more now! It's about applications.

- Ok then, so let's drop the nonsense about separation of concerns, that you can have layouts separate from content.

- No no no, HTML is for describing documents, and CSS is for describing its layout!

Re: How to Center in CSS

#186

Post by TeMPOraL »

davesque wrote: post #62
cyphunk wrote: post #58

Earlier quoted context omitted.

Indeed I have non-TABular data and yet I should use TABle-cell? I'll just stick with the actual then. cleaner. But the real problem is "use divs". plural. so already breaking the #container_of_container cruft rule. I'd rather write some javascript with overly nested callbacks and leave the html clean. thanks.

Yeah, it's obnoxious when people get up-in-arms about specifics. But, you have to admit that it's correct. Why use explicit tables when you can use style overrides to get the look you want and your HTML markup is more meaningful to robots?

But then just admit it, you broke the web separation of concerns rule ("HTML is for content, CSS is for layout"). Which is load of nonsense, if you ask me, but people seem to treat it as a kind of religious dogma.

Re: How to Center in CSS

#187

Post by TeMPOraL »

ux-app wrote: post #92
drcode wrote: post #29

Earlier quoted context omitted.

IMHO constraint systems like GSS ( http://gridstylesheets.org/ ) handle centering in a much cleaner way. Pity that approach hasn't gotten any traction (though some people smarter than me say it's a bad idea, so who knows what the right answer is...)

When I first heard of GSS I thought it was the solution to layout that we'd all been waiting for. Unfortunately it's not all roses. It's possible, and quite easy to inadvertently create cyclical constraint dependencies. Depending on how your constraint solver is written this might mean that a layout will fail or that your system will lock or crash. I'm subscribed to a couple of constraint solver mailing lists. A comm…

> I still really like the idea of constraint based systems, but I think they are more suited to (web)applications rather than documents.

Which is what some people will tell you web is about when you point out to them they're doing something weird instead of writing a document communicating a message. Maybe it's time to separate those two use cases - web pages and web applications - because otherwise people will keep getting confused between the needs and problems of the two?

Anyway, GSS looks pretty cool.

Re: How to Center in CSS

#188

Post by yoran »

nailer wrote: post #140
rsanek wrote: post #121

Earlier quoted context omitted.

Only partially. You usually have to use browser prefixes to get it to function. http://caniuse.com/#feat=multicolumn

Add Autoprefoxer in your build process and never type them again.

Or use Bourbon mixins (http://bourbon.io/docs/) if you use SASS.

Re: How to Center in CSS

#189

Post by eddd »

This actually proves that CSS is broken. I just want to say: 'put this content in the middle' nothing else. That is the reason why I am trying to avoid doing frontend whenever possible - it just sucks. Luckily Elm(http://elm-lang.org/Learn.elm) tries to solve that problem and i hope it will get some traction very soon.
Post reply on HN