As others said, flexbox is a complete replacement for all layour hacks in CSS. This site helped me understand flexbox: http://flexboxin5.com/ Browser support: http://caniuse.com/#feat=flexbox
That site is completely broken in Safari. Don't think we're ready for flexbox just yet.
How to Center in CSS
111–120 of 297 posts
Re: How to Center in CSS
#112Earlier quoted context omitted.
You need absolute positioning because margins in the normal flow are special in that they're subject to margin collapse, and trying to specify some sort of special interaction between margin collapse and "margin: auto" would be too complex. Absolute positioning is also nice because it has a well-defined notion of a containing block , which allows CSS 2.1 to easily define "what I'm vertically centering relative to". T…
If I wanted to do those things, I should write "margin-collapse: disabled" and "vertical-align: center". Making your abstractions leaky on purpose doesn't mean you're justified in doing it. I don't understand CSS all that well, but I do understand basic layout concepts and my specific intent, and it isn't very productive to have to wait around for people like you to write books and answer stack overflow questions jus…
Adding "margin-collapse: disabled" would increase the complexity of CSS for no real reason, because now there would be three modes instead of two: static block, static-block-with-margin-collapse-disabled, and absolute position. There would be no benefit other than increased complexity of what is already a quite complex spec.
The real problem, IMHO, is that margin collapse exists at all. But that is not a CSS problem: that is a problem that goes way back to ancient, pre-CSS versions of HTML. A design goal of CSS, which was vital for its success, was to be backwards-compatible with HTML, in that you can describe every HTML layout in terms of CSS. (This is still not fully realized, because there are some bizarre corner cases involving things like , which for example Hacker News relies on, but it's mostly there.)
Re: How to Center in CSS
#113Earlier quoted context omitted.
It is a feature of CSS 2.1. See my reply to chubs above. CSS 2.1 10.6.4 requires that "margin: auto" on both sides of an absolutely-positioned element mean "vertically center it".
You're saying that because they defined centering to occur when I mess with margins that makes centering a feature? Technically yes... I meant an explicit feature with it's own attribute.
I find it hard to fault the designers of CSS 2.1 for not being more complex than it was at the time. CSS 2 was a huge advance over CSS 1, so much so that a common feeling at the time was that CSS 2 had so many features no browser vendor would ever implement it all. The authors of CSS 2.1 had to maintain a delicate balance between giving authors the tools they needed and exploding the complexity of the spec, and making vertical alignment fall out of "margin: auto" was one of the ways they did just that.
Re: How to Center in CSS
#114Earlier quoted context omitted.
Down vote for "doesn't make sense". It made perfect sense to me. The phrase you were looking for is " I don't understand what you're saying."
Then perhaps you would like to explain it? The most meaningful interpretation I can see is that the commenter completely misunderstood the nature of the "semantic witch hunt" to which he referred. It seems charitable to assume that something was lost in translation and to ask for clarification rather than to assume that the commenter was just saying something stupid.
Re: How to Center in CSS
#115Earlier quoted context omitted.
No, use divs and table-cell display values if you want to have non-tabular data displayed like a table.
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.
Re: How to Center in CSS
#116Re: How to Center in CSS
#117The 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.
Re: How to Center in CSS
#118Re: How to Center in CSS
#119The 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.
Re: How to Center in CSS
#120Earlier 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.