Live data from Hacker News

How to Center in CSS

howtocenterincss.com

121–130 of 297 posts

Re: How to Center in CSS

#121

Earlier quoted context omitted.

Sweet. I figure only 15 more years until we get two column layouts working, and then we'll finally be able to publish like it's 1979.

CSS multicolumn layout is four years old. It's implemented in all the major browser engines, and many popular sites like Wikipedia use it. http://www.w3.org/TR/css3-multicol/

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

Re: How to Center in CSS

#122
post #119

Earlier quoted context omitted.

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.

Funny, because you say he's in luck and yet, that isn't at all what he wrote. At all.

The only differences are that you have to opt into the new box model (required, because "justify-content" and "align-items" are incompatible with the old box model) and the names are different (which is a good thing, because one of the important features of flexbox is that you can switch from vertical to horizontal layout very easily).

Re: How to Center in CSS

#124
post #106

Earlier quoted context omitted.

The problem with tables for layout is that the layout algorithm is incredibly complex. People seem to think it's simple, because it kinda does the "right thing" in many cases, but it's actually ill-defined, varies between browsers, and has only a work-in-progress spec [1]. Width calculation is defined in terms of linear interpolation between the closest of four "candidate guesses" which bound the available width. And…

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.

Re: How to Center in CSS

#125
post #66

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.

and I wonder how the somehow survived unscathed and free from the semantic witch hunt of yore. shouldn't we replace them with: ?

The "semantic witch hunt" against using tables for page layout exists not because the table tag is a semantic tag, but rather because pages are not tables. Likewise, ul and li tags are semantic, and I think most people would advise against using them for something other than unordered lists and list items.

Of course, the issue would probably come up rarely, since the browser stylesheets for those tags don't do anything particularly useful for anything other than lists and list items.

Re: How to Center in CSS

#126
post #13

Wow CSS is unfriendly, you really realise how poor it is once you learn other layout systems (android's XML and iOS auto layout, etc). Wish there was another standard that could co-exist side by side on the web, something simple enough to be implemented reliably by the browser vendors.

> Wish there was another standard that could co-exist side by side on the web, something simple enough to be implemented reliably by the browser vendors. That standard exists. It's called flexbox. It was designed to solve exactly this problem (among many others), and does. That said, as I never tire of mentioning, vertical centering was a part of the design of CSS 2.1. The technique is called "absolute centering". Se…

But then what happened to it?

wtf?

do...do they know...how many manhours could've been saved...?

Re: How to Center in CSS

#127
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.

is content, table-cell: is presentation. Semantic tag use matters because some people are blind and their screen reader will start randomly start talking about some structure that makes zero sense in context

I understand and agree with the general argument, but is it actually true that screen readers for the web are that naive? I would expect them to render a page (like with WebKit) and try to figure out the layout of the page, which things are actually visible, etc., or at least use heuristics to figure out what is and isn't content (in the same way that Readability-esque algorithms presumably do).

Re: How to Center in CSS

#128

Earlier quoted context omitted.

> Wish there was another standard that could co-exist side by side on the web, something simple enough to be implemented reliably by the browser vendors. That standard exists. It's called flexbox. It was designed to solve exactly this problem (among many others), and does. That said, as I never tire of mentioning, vertical centering was a part of the design of CSS 2.1. The technique is called "absolute centering". Se…

But then what happened to it? wtf? do...do they know...how many manhours could've been saved ...?

Yeah, everyone did a really bad job of evangelizing absolute centering back in the day, leading to lots of angry Web developers and awful hacks like the inline-block/vertical-align trick. It should have been the first example given for "position: absolute"…

Re: How to Center in CSS

#129

Earlier quoted context omitted.

> Wish there was another standard that could co-exist side by side on the web, something simple enough to be implemented reliably by the browser vendors. That standard exists. It's called flexbox. It was designed to solve exactly this problem (among many others), and does. That said, as I never tire of mentioning, vertical centering was a part of the design of CSS 2.1. The technique is called "absolute centering". Se…

But then what happened to it? wtf? do...do they know...how many manhours could've been saved ...?

Nothing happened to it. It gets used by front-end developers every single day. I personally can't follow the CSS complaints. It is easier to learn than any other front-end dev language in one's toolkit.

Re: How to Center in CSS

#130
post #51

Earlier quoted context omitted.

Every 4 years: "lets check if latest css can center dynamic sized things without a bunch of #container_of_container cruft". Just stick with: And what the hell does "margin: auto" mean ? I'd like to hear some print designers using that in normal conversation. "oh and also i'd like these margin's auto'ed". At this rate the table tag is going live longer than the copyright on mickey mouse.

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.

You can use semantically meaningful class names and use the mixins from the Bootstrap source. Even though it's probably common practice and great for you know, bootstrapping, I don't think it's good for maintainability to leave the column classes in the markup. In a large, modular, front-end heavy project, proper separation of content, presentation, and other cross-cutting concerns really pays.
Post reply on HN