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

131–140 of 297 posts

Re: How to Center in CSS

#131

Post by EdiX »

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.

Open up any webpage and count how many divs with no other purpose but to serve as CSS anchors there are. We traded in non-sematic tables for non-sematic divs.

Re: How to Center in CSS

#132

Post by seekingcharlie »

Retra wrote: post #80
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.

Unfortunately, CSS doesn't really fix that problem.

If you're writing it properly (i.e. not inline), it actually does. Even more so now with SASS & variables.

Re: How to Center in CSS

#134

Post by seekingcharlie »

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 if I know exactly what you mean, but can you use :nth-child for the nth box that shouldn't be centered?

Re: How to Center in CSS

#135

Post by wycats »

pcwalton wrote: post #82
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.

It's legitimate for people to point out that these fixes are not universally available, because many people still need to support old versions of IE.

That said, I think it's important for people to understand that many of the problems that people have canonically associated with the web's incompetence have been "solved" in standards for a number of years. There's a real difference between problems that remain unsolved in all browsers and problems that do not remain in the current versions of all browsers.

That difference may seem moot until the features are universally rolled out, but understanding that a solution to centering content rolled out in all major browsers (including Internet Explorer) three years ago may help us get past a sense of learned helplessness about the web.

Yes, improving the platform takes time, but by making browser vendors aware of the problems we face as web developers, things do get better.

Re: How to Center in CSS

#136

Post by 21echoes »

jekrb wrote: post #23
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.

I've heard that android's XML layout is terrible (from an android developer) and that iOS auto layout is borderline magic (from an iOS developer). Personally, I don't find css to be that bad at all, but I work in it at least a little everyday so it might just be stockholm syndrome.

as someone who's done both (and web) -- Android's XML layout is easily the best of Android, iOS, and web, while iOS's AutoLayout is a complete mess that basically only works because there are still so few iOS screen sizes. Android coding in general is a pain compared to iOS, but they definitely got the declarative layout system right.

Re: How to Center in CSS

#137

Post by ommunist »

sunst wrote: post #117
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.

i use this waty to solve my center problem,truly it works,but it lead other problems,like this: test test test test test test test test the flex will ruin the layout of the div,so how can i solve this problem?thank you

Spans are stripped out by Outlook 2010 in HTML mail. This is not edge case, as you may think. Most corporates are still on Outlook 2010 (and IE 6, especially large banks in the UK).

Re: How to Center in CSS

#138

Post by bct »

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.

Browsers should e.g. allow tables to be sorted by clicking column headers. They can't, because tables aren't always tables.

Re: How to Center in CSS

#139

Post by ommunist »

cyphunk wrote: post #51
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; }

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.

Yes, you are right. As long as people are using HTML mail, tables for layout are the only way to go.

Re: How to Center in CSS

#140

Post by nailer »

rsanek wrote: post #121
pcwalton wrote: post #109

Earlier quoted context omitted.

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

Add Autoprefoxer in your build process and never type them again.
Post reply on HN