Live data from Hacker News

How to Center in CSS

howtocenterincss.com

111–120 of 297 posts

Re: How to Center in CSS

#111
post #27

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.

Safari needs prefixing and I think that site doesn't have prefixes.

Re: How to Center in CSS

#112
post #96

Earlier 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…

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

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

#113

Earlier 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.

Sure, and we have that now, with flexbox. "align-items" is the property you're looking for.

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

#114
post #99
post #91

Earlier 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.

Very true, and such charity doesn't help the discussion. Insisting on the polite path, "I don't understand" instead of "your comment makes no sense" wrongly assumes that all comments written on forums are carefully considered and fact-checked before posting. It's taking the long way to resolution of that point, and you might never get resolution if bogged down in overly-polite discourse for fear of being "negative".

Re: How to Center in CSS

#115
post #58

Earlier 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.

You'd rather write unncessary Javascript and/or three nested HTML elements (table > tr > td) instead of two divs and some simple CSS? Man, I'd hate to be one of your clients since you don't really understand front-end development.

Re: How to Center in CSS

#117
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 use this waty to solve my center problem,truly it works,but it lead other problems,like this:test test test testtest test test test the flex will ruin the layout of the div,so how can i solve this problem?thank you

Re: How to Center in CSS

#118
This is the sort of thing that makes me conclude that the right way to teach oneself html+CSS is to read about the basics and then just find 100 increasingly-difficult layouts to implement and grind through them.

Re: How to Center in CSS

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

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

Re: How to Center in CSS

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

Just starting to realize how out of touch HN readers are with CSS. This mindset does not belong in a conversation about CSS in 2015.
Post reply on HN