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

191–200 of 297 posts

Re: How to Center in CSS

#191

Post by gurkendoktor »

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.

iOS developer here. AutoLayout is definitely not borderline magic, and some people hate it.

It is inefficient. It is awkward to set up in code, so many people write their own syntactic sugar around it. It crashes hard when it isn't 100% sure what to do with its constraints. Working with multi-line text is still a pain, so you often run into clipped text on iOS if you dare to increase the font size. etc.

Re: How to Center in CSS

#193

Post by dredmorbius »

ommunist wrote: post #139
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.

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

You just made the best case for Markdown email that I've seen.

Author email in straight text? Markdown is what you're writing already.

Author it in WYSYWIG/GUI clients? You only care about presentation.

Re: How to Center in CSS

#194

Post by Nemcue »

ommunist wrote: post #141
mambodog wrote: post #20

This should also have an option for 'what browsers do you need to support' and just provide flexbox output instead if you don't need to support legacy IE.

Don't forget the need to support HTML email clients. Say, Lotus Notes.

Using some sort of service (i.e. Mailchimp or any of the other numerous email sending services) surely takes care of this, no?

Re: How to Center in CSS

#195

Post by lolo_ »

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.

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 but allows totally intuitive positioning, provides error messages if you make a mistake and generally isn't as infuriating as CSS is. The amount of times I've done something which seemed like it really ought to do what I want and the layout doesn't change is unbelievable. Even assuming vertical alignment is totally solved by flexbox it's still an agonisingly painful thing to work with.

Re: How to Center in CSS

#196

Post by scotty79 »

yAnonymous wrote: post #176
supercoder wrote: post #56

Earlier quoted context omitted.

That site is completely broken in Safari. Don't think we're ready for flexbox just yet.

It's not the site that's broken, but Safari.

What's broken is not Safari but people who buy Macs. ... I can't go any deeper. Still I'd like my site to look good to a meaningful market share.

Re: How to Center in CSS

#197

Post by georgemcbay »

hwh wrote: post #170
tedunangst wrote: post #95

Earlier quoted context omitted.

Sweet. I figure only 15 more years until we get two column layouts working, and then we'll finally be able to publish like it's 1979.

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.

Re: How to Center in CSS

#198

Post by scotty79 »

justindocanto wrote: post #12

The table-cell solution for vertically centering text is incorrect. You need to put that display:table-cell div inside a display:table div. It requires the parent in order to work properly. Example: Your text here .item {display:table;} .item > div {display:table-cell;vertical-align:middle;} I use this method on justindocanto.com to vertically center an unknown amount of text/elements inside a div that changes its si…

Yes. This page gives wrong solutions for unknown size of centered block but known sizes of container.

Re: How to Center in CSS

#199

Post by Figs »

baddox wrote: post #127
RubyPinch wrote: post #64

Earlier quoted context omitted.

is content, table-cell: is presentation. Semantic tag use matters because some people are blind and their screen reader will start randomly start talking about some structure that makes zero sense in context

I understand and agree with the general argument, but is it actually true that screen readers for the web are that naive? I would expect them to render a page (like with WebKit) and try to figure out the layout of the page, which things are actually visible, etc., or at least use heuristics to figure out what is and isn't content (in the same way that Readability-esque algorithms presumably do).

> Readability-esque algorithms presumably do

They look for the div with the most text/paragraphs in it and assume that's the article. At least, that's what the open source ones I looked at a while back do -- the proprietary ones that force you to go through their own server could use other tricks.

Re: How to Center in CSS

#200

Post by rivo »

Unfortunately, this page does not give a solution to a long-standing centering problem I've had: Given a single DIV of unknown width and height, how do I center it in the middle of the screen (floating, i.e. fixed)? Note the "single DIV" so no wrapping in additional container DIVs!

The only approximation I could find was this:

  .mydiv {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
  }
This, however, looks horrible on most browsers as they either use hardware acceleration (resulting in blurry output) or they drop pixels (e.g. single-pixel lines) falling between the grid.
Post reply on HN