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

81–90 of 297 posts

Re: How to Center in CSS

#81

Post by SquareWheel »

cyphunk wrote: post #76
lucideer wrote: post #68

Earlier quoted context omitted.

The objection to tables for layout was never on the basis of grid layouts being bad, it was on the basis of separation of concerns. The primary problem with layout tables was that they involved tightly coupled inlining of your layout rules.

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'd agree it's not completely divorced, but it's much, much better than it used to be. If you've worked in environments where the only access you have is CSS (for instance, locked down CMSes, or editing subreddits), you'll find that many solutions are possible without manipulating HTML. CSS can be very powerful; especially with the advanced selectors of CSS3.

Re: How to Center in CSS

#82

Post by pcwalton »

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.

Re: How to Center in CSS

#83

Post by Retra »

pcwalton wrote: post #18
crimsonalucard wrote: post #16

This is why css is fundamentally broken. Centering should be a feature in itself. I shouldn't be manipulating other attributes to achieve centering.

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

That's really counterintuitive; the vertical center isn't an absolute position.

Re: How to Center in CSS

#84

Post by SquareWheel »

lnanek2 wrote: post #37
DiThi wrote: 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

Hmm, that http://flexboxin5.com/ site didn't work in Chrome at all. Claimed it was going to resize when I pressed resize it early on and did nothing.

Works fine here. You might have an extension that's breaking something? Try an incognito window as a quick test, which should disable extensions.

Re: How to Center in CSS

#85

Post by pcurve »

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.

I agree and it really bothers me that all the markups in modern web pages are littered with COL, span, md, lg, xg, 1/2 2/3, with gibberish nestings. Semantic web went out the window, in favor of responsive web.

The whole web is fad-driven, so I'm glad at some point, pendulum will swing back.

Meanwhile, I'm just happy parallax fad is dying out.

Re: How to Center in CSS

#86

Post by pcwalton »

Retra wrote: post #83
pcwalton wrote: post #18

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

That's really counterintuitive; the vertical center isn't an absolute position.

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

The way absolute centering vertical alignment works in CSS makes sense once you understand containing blocks: you specify "position: absolute" to disable margin collapse and establish a containing block, you specify the offsets from the edges of the containing block that you want, and then you invoke the vertical-centering feature in CSS by saying "margin: auto".

Re: How to Center in CSS

#87

Post by MichaelGG »

WalterGR wrote: post #46
chubs wrote: 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.

How do Android's XML and iOS's auto layout compare to Microsoft's WPF? I used the latter around 10 years ago and found it pretty nice.

Exactly. I haven't done HTML layout since circa 2000. I tried WPF about 8-9 years ago and well, it was just simple to get layouts right. I'm sure there's some reasonable reason for it, I just don't understand why browsers couldn't do similar, or just rip off WPF.

Re: How to Center in CSS

#88

Post by danellis »

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

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

If you go down that path, there are no semantic elements left at all.

Re: How to Center in CSS

#89

Post by [deleted] »

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; }

[deleted]

Re: How to Center in CSS

#90

Post by lisa_henderson »

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.

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 give us what we actually need. HTML strains to fulfill two discordant goals, one is to give us structured documents, and the other is to give us a GUI for TCP/IP. But we now realize these two goals would be better served by two separate technologies, and HTML should be retired."
Post reply on HN