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

261–270 of 297 posts

Re: How to Center in CSS

#261

Post by samspot »

supercoder wrote: post #55
cyphunk wrote: 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.

Tables nested in tables nested in tables was a fate worse than divs. Even in the simplest case (one box) a table stinks: . I personally found that trying to debug which table a belonged to was hell on earth.

Re: How to Center in CSS

#262

Post by Dylan16807 »

TeMPOraL wrote: post #180
castell wrote: post #172

Earlier quoted context omitted.

Outlook 2007+ use MS Word as email layout engine, instead of Trident (Internet Explorer). MS Word "web view" is based on Frontpage (which itself forked of trident) and produces broken HTML 4 output. The HTML email world is stuck with HTML 4.1, inline CSS and many corner cases (worse than the IE6 era!).

> The HTML email world is stuck with HTML 4.1, inline CSS and many corner cases (worse than the IE6 era!). It might be for the better, actually. HTML5 and CSS3 are Turing-complete[0] so I can imagine that the moment they would be allowed, some clever marketing company would figure out new and impressive ways to use the new features to scam people. Er. I meant, "provide value-added content". [0] - with user closing th…

Even if the user didn't have to click on each box, that's not even close to turing complete in the problematic sense. It requires a new line of html for every cycle. O(n).

You can do worse with less.

It doesn't belong on that page.

(Hint: basic arithmetic is turing complete if you give it the same affordances)

Re: How to Center in CSS

#263

Post by DiNovi »

toxican wrote: post #248

To save people a bunch of time, here's 90% of the comments: >Just use flexbox! Which is great, except it isn't supported at all by IE8 or 9 and is only partially supported in IE10 (by prefix only). Which means a lot of people simply can't use it. I'm hesitant to use it myself, and I've got a very lax policy on supporting old IE.

My company recently went all in with flexbox, and you should too. We had the same concerns, but even IE 9 is 4 years old at this point, and we decided we shouldn't be held back because of it. If a client wants IE9 support, they can pay extra.

I have run into a few IE10 gotchas, but they're all solvable. IE10 just uses an older version of the spec.

and IE itself will be cut loose from MSFT in a few months.

Re: How to Center in CSS

#264

Post by DiNovi »

intruder wrote: post #61
SimeVidas wrote: post #52

All the people who are still perplexed by this, have to admit that they haven’t heard of or tried flexbox. It works beautifully (in conjunction with Autoprefixer).

Heard of flexbox, it's nice but here's one thing I haven't been able to do with it: Center a bunch boxes in a row and have overflowing boxes show up on the next row to the left or right. Doesn't work, it will center the next row as well. I haven't found a non JS solution to this yet.

not sure excalty what you're descibing, but shouldnt flex-wrap work to fix this?

Re: How to Center in CSS

#265

Post by davesque »

TeMPOraL wrote: post #186
davesque wrote: post #62

Earlier quoted context omitted.

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.

Do you mean the requirement for a container `div`? If so, IMHO, that is the most routinely broken "rule" in web page design that I can think of. It should be obvious that the technologies involved in web pages are not perfect. I'm not claiming otherwise. It's a question of trade-offs. You're going to break the HTML is content convention whether you use a `table` element or a `div` element with "display: table". So why not just go with the one that's more correct? It's up to you either way I guess.

Re: How to Center in CSS

#266

Post by pcwalton »

lisper wrote: post #153
pcwalton wrote: post #82

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.

This is a big step in the right direction, but I'm afraid it's still broken. Centering things in this way breaks the tag. It works inside text but now fails between elements. For example: foo baz renders correctly as foo bar but foo bar renders as foobar. And AFAICT it doesn't work at all in Safari even with vendor prefixes.

The
tag is defined as a tag that inserts a newline with generated content using pre-formatted whitespace. It only works between blocks because of anonymous block element generation. I'm glad that the flexbox spec didn't require some sort of anonymous block element generation; it's really complex as it is and adding anonymous blocks to flexbox would have been hideously complicated.

Re: How to Center in CSS

#267

Post by talmand »

3minus1 wrote: post #249
talmand wrote: post #239

Earlier quoted context omitted.

A tool is not broken if people insist on using it in ways it was not designed to be used. The fact that you say there is no easy vertical center, of which I disagree, doesn't make it broken. It means it's missing a feature you wish existed.

> it's missing a feature you wish existed. indeed, an extremely basic and fundamental feature than any site that implements popups could use.

And yet, popups seem to work just fine without this missing "basic and fundamental" feature. There are numerous ways to handle the problem that is legitimate and valid.

Re: How to Center in CSS

#268

Post by talmand »

Touche wrote: post #238
pcwalton wrote: post #82

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.

It's just too bad you have to add comments to understand what "justify-content: center" means. I mean, I guess it was too much trouble just to give it the semantically correct names.

Seems semantic to me. What would you suggest instead?

Re: How to Center in CSS

#269

Post by dkersten »

oneplusone wrote: post #231
dkersten wrote: post #220

Earlier quoted context omitted.

Flexbox is nice and makes some things easier, but its still (IMHO) a half assed solution compared to something like QML's anchors. In QML I can center like this: anchors.centerIn: parent (replace parent with id of item you want to center in if not the parent item). You can also do just vertical or horizontal centering, or you can fill another item or you can anchor eg the left of your item the the right of another it…

That is why CSS Grids are coming: http://dev.w3.org/csswg/css-grid/

Like flexbox, this looks like a definite improvement over what we have now, but it looks quite complicated with less than ideal syntax. I imagine that's mostly to do with playing well with existing CSS (syntax and semantics) but its rather unfortunate. I looked at a bunch of the examples and found them quite difficult to figure out, but when I started with QML, I saw one snippet of sample code and immediately was able to create complex layouts myself.

Don't get me wrong, I'm glad CSS is getting better and will look forward to the day when I can use this (but lets be realistic, it'll be a while yet before enough browsers support this to be usable), but I can't help but feel that its cruft built on top of cruft and that it won't ever be as slick and simple as something like QML.

Re: How to Center in CSS

#270

Post by talmand »

amelius wrote: post #213

My personal trick is to position the content absolutely at 50% (both left and top), and then transform the content using a -50% translate in both directions. Works for dynamically sized content (and statically sized content as well, obviously).

But then people whine about no support for a six-year old browser.
Post reply on HN