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

241–250 of 297 posts

Re: How to Center in CSS

#241

Post by talmand »

CmdrKrool wrote: post #212

I know the web is not print, pages are not static, user screens vary and one shouldn't try to control everything bla bla bla, but it seems all my layout woes ultimately boil down to difficulty in lining things up . That's what 'layout' means after all, isn't it? Aligning one thing with another, to show they're related. I'm not a classically trained graphic designer, but doesn't any explication of visual fundamentals…

As a classically trained graphic designer, I find the biggest problems to layout is more due to the fact that the display is completely unknown. It can range anywhere from hundreds of pixels in width/height to thousands of width/height in pixels. Not to mention the differences in pixel densities and orientations.

If one were to consider these problems alone, CSS works quite well for what it was designed to do. Most designers I've discussed these problems with have problems more in their thinking than with the tool itself. They mostly try to apply print design thinking to web design, which simply does not work.

Re: How to Center in CSS

#242

Post by toxican »

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.

And if you use something like Compass, the prefix stuff is taken care of for you http://compass-style.org/reference/compass/css3/flexbox/

Re: How to Center in CSS

#243

Post by kowdermeister »

rivo wrote: post #237
kowdermeister wrote: post #206

Earlier quoted context omitted.

Flexbox does it for you. http://codepen.io/kowdermeister/pen/mJbGdr

This also relies on a container DIV (".overlay"). So Flexbox doesn't help here.

Why is that a problem? In real life you always have a container div.

Re: How to Center in CSS

#244

Post by talmand »

rivo wrote: post #237
kowdermeister wrote: post #206

Earlier quoted context omitted.

Flexbox does it for you. http://codepen.io/kowdermeister/pen/mJbGdr

This also relies on a container DIV (".overlay"). So Flexbox doesn't help here.

What exactly is your centered div centering to if there's no container div? The .overlay div is the container, the .dialog div is centering itself as defined by constraints of .overlay.

I'm failing to understand your expectations.

Re: How to Center in CSS

#245

Post by ocdtrekkie »

The fact that this site exists is confirmation that all of my "bah humbug" about using CSS over tables is pretty justified. And while CSS still renders differently in every browser, I have yet to find a browser that can't render tables consistently.

Re: How to Center in CSS

#246

Post by lobo_tuerto »

lolo_ wrote: post #195
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.

Unfortunately, though flexbox is nice and a welcome addition, it's not the panacea people make it out to be having used it a fair bit in the past - the details of how it plays with the rest of the layout and the various options are complicated (see http://www.w3.org/TR/css-flexbox-1/ if you don't believe me), and sometimes the interactions are confusing. I still think there's scope for a language that compiles to CSS…

Maybe this can clear some things up: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Re: How to Center in CSS

#247

Post by LostInTheWoods2 »

georgemcbay wrote: post #197
hwh wrote: post #170

Earlier quoted context omitted.

Hm, had you said 1978, I would have gotten the reference (Spoiler: TeX, though maybe not really 2-column at the time?). Did you have something specific in mind when writing 1979?

"Did you have something specific in mind when writing 1979?" Probably the Prince song "1999" (party like it's 1999...) combined with the general era in which this stuff was figured out in non-web digital contexts.

1984 with the introduction of the Macintosh, would be a better year to have picked, as it could be considered the beginning of the desktop publishing revolution.

Re: How to Center in CSS

#248

Post by toxican »

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.

Re: How to Center in CSS

#249

Post by 3minus1 »

talmand wrote: post #239
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; }

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.

Post reply on HN