Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

The complete guide to centering a div

tipue.com

Post reply on HN
Print view View original

131–140 of 170 posts

Re: The complete guide to centering a div

#131

Post by Lerc »

mietek wrote: post #128
Lerc wrote: post #99

Earlier quoted context omitted.

CSS has two faces, the awesome "You can make amazing things with ease" face and the "It won't do what I want unless I create some cludgy arrangement of elements in order to attach a combination of weird properties" Those two faces are because of two simple facts. 1. CSS is a really good way to set properties. 2. The properties are shit. The part of the properties that is most gloriously broken for layout is that the…

Have you tried flexbox? http://html5please.com/#flexbox

I have had a look at it. It doesn't fill me with confidence. It looks like it will make some things possible that previously required wrapper elements, but it doesn't seem to be very easy to imagine scenarios.

It feels like it is a solution directed at specific problems, whereas I always felt that was much of the problem with CSS properties. They solved their target problem and if your problem was different to their one you might be out of luck. If the properties were defined to be more general I think a lot of those problems would never have appeared.

Re: The complete guide to centering a div

#132

Post by coldtea »

crazygringo wrote: post #42

Whenever anybody says that CSS is easy, or "of course you can do that with CSS", or even hints that CSS is somehow well-designed... ...the only thing I really need to say, is that every couple months, on Hacker News, where a lot of really smart people hang out, a new top-voted story comes up about how to center a div . With tons of comments and discussion too. And it's not even a joke. What more is there to say?

CSS was created for styling. Bold, colors, borders, that stuff. It was not meant as a layout engine. Hence the name, of course.

Floats were meant for other stuff (placing pictures in the flow of text and such). They are just as much as an abuse as using tables was for layout.

But tables, at least, had one thing going for them: they are an almost feature full layout system for most needs, with sane defaults, and familiar (from all grid layout systems) behavior. So both CSS and tables were abused for layout, but at least with tables they picked something appropriate to abuse.

Now, finally, CSS has some extra functionality (flexbox, multi-column etc) that was added later as specifically intended for layout. Which, of course, is not fully supported and implemented yet.

Btw, the whole idea of "semantic html" is another cargo-cult -- people conflating the webpage (a presentational output) with some intermediate format, forgetting that REST, JSON, DBs et all are far more appropriate for that repurposing of content.

Basically a bunch of designers who knew nothing about computer science, taxonomies, RDF, etc, thought it would be very sophisticated to adopt this "semantic" word. So, they started building pages caring about the naming of elements and such, as if webpages are meant for screen-scrapping (some hand waving always included support of "reading devices", who nobody of course ever tried to actually test with his pages -- they'd found out they're specially adapted to work with regular noise webpages).

Re: The complete guide to centering a div

#133

Post by unclebucknasty »

maj0rhn wrote: post #21
peter_l_downs wrote: post #10

Earlier quoted context omitted.

As igvadaimon wrote below, there's no need for a tag. Instead of: my div you can do my div The inline styling is just for illustrative purposes, of course.

I'll admit that the table-cell approach is nice -- thank you. But how curious that the article, which purports to be an in-depth examination, doesn't mention it. And how curious that the table-cell approach has not turned up in the numerous times I've gone looking on-line for a robust, pure CSS solution. I've long harbored suspicions that many CSS gurus are too quick to adopt complex solutions.

I think, at least in some small part, the people who went over-the-top anti-table in favor of CSS don't advocate table-cell usage for that reason.

That is, it could be read as kind of an admission of CSS's shortcomings for layout, and HTML table's relative ease for same.

Kind of like saying, "Don't use HTML tables. They are evil and you are an amateur. Use CSS instead. It is amazing and absolutely rocks. Er, BTW, if you actually want it to work, use table/table-cell properties, etc".

Re: The complete guide to centering a div

#134

Post by userbinator »

_mtr wrote: post #8
joshfraser wrote: post #6

I'm centered!

DRY, though, right? Changing one set of CSS rules is better than hunting down 20 elements when requirements change. Not to mention is deprecated.

A simple search-and-replace is enough to get all the elements... and chances are when the requirements change, that's the least of the structural changes you'll have to make. IMHO all the CSS purists do is overcomplicate things.

Re: The complete guide to centering a div

#135

Post by userbinator »

maj0rhn wrote: post #21
peter_l_downs wrote: post #10

Earlier quoted context omitted.

As igvadaimon wrote below, there's no need for a tag. Instead of: my div you can do my div The inline styling is just for illustrative purposes, of course.

I'll admit that the table-cell approach is nice -- thank you. But how curious that the article, which purports to be an in-depth examination, doesn't mention it. And how curious that the table-cell approach has not turned up in the numerous times I've gone looking on-line for a robust, pure CSS solution. I've long harbored suspicions that many CSS gurus are too quick to adopt complex solutions.

It feels like they're doing "something right" by avoiding at all costs, even if it means emulating the same behaviour that's already built into the browser with a set of CSS rules. This is blind faith, not reason... and oddly enough I've noticed this type of dogmatic thought far more in the web development community than in that of any other programming language. My own philosophy on writing webpages is to do the simplest thing that works and don't obsess over layout; the content is more important. I'll use tables when they make things easier, CSS when it makes things easier. But never do I give any consideration to "X is bad", "always use Y" etc. After all, your visitors probably couldn't care less whether you used tables or CSS.

Re: The complete guide to centering a div

#137

Post by Tloewald »

magicalist wrote: post #115
Tloewald wrote: post #100

Earlier quoted context omitted.

You're completely missing the point. Having elaborate workarounds for utterly common problems that have all kinds of edge cases is exactly where we were with button rollovers in 2005. All the W3C had to do for CSS2 was look at Mac App or Cocoa or any other decent GUI framework and figure out what needed to be added to make all that stuff work simply. Instead we get ridiculous crap that sort of half solves the problem…

No, you missed what I wrote (for instance, nothing of what I wrote would qualify as "elaborate"). If you're referring to centering a div, the issue is not workarounds because the specs are half-assing it, the issue is workarounds because people are still running IE8. All current browsers ship flexbox. You can stop catering to those older browsers, but that's a business decision, not a web standard one. Best time to p…

The article's example for "vertical" centering is both elaborate and doesn't actually work unless you dedicate the outer div entirely to centering and you do it by fixed dimension. Every "solution" I've seen or tried to this problem is actually a workaround that only covers a subset of possible (common) cases.

And requiring the middle div to be fixed dimension for centering to work is dire.

By contrast, imagine if something like position: absolute, align: center center; just worked! Or imagine if the elaborate CSS syntax for positioning background images were available for positioning any element within its offset parent. Imagine if offset parents worked sanely.

Again, centering a control within a rectangular context was a (i) known, (ii) common, and (iii) solved problem outside the web browser in 1990. Go see how resizing is handled in Interface Builder -- same as it was in 1989.

If there's a solution to cleanly upscaling images to fit, I'd like to know what it is. Downscaling relies of max-width|height which itself is more of a lucky side-effect (like most of the "solutions" CSS provides).

And the problems I point out in the second paragraph, such as having to write all kinds of code to handle resizing, are totally intractable with CSS right now.

Re: The complete guide to centering a div

#138

Post by cema »

hamburglar wrote: post #28
lpolovets wrote: post #16

I don't know anything about the history of CSS's design, but I'm perpetually amazed that positioning (and specifically centering) requires so much CSS magic. I would think CSS positioning would be a one-liner, but instead it's a collection of context-dependent, browser-dependent recipes. I wonder if there's a good reason for the madness, or if it's just poor design. (FWIW, I'm a backend engineer and have only dabbled…

The sad thing is that I'm going to bookmark this.

Well, I have bookmarked it both for the article contents and for the discussion. As is often the case.

Re: The complete guide to centering a div

#139

Post by cma »

RussianCow wrote: post #74
zachrose wrote: post #57

Earlier quoted context omitted.

Surely we can agree: designing text and images in a fixed frame without alternatives for accessibility is a completely different ball game then designing for screens of immensely variable dimensions with audiences as diverse as completely blind users and search engine bots. Does anyone have an alternative to CSS that tries to take on a problem this big?

To be fair, CSS is hard even if you're only designing for one screen/device.

Many tools that handle diverse problems are worse in specific problems: jack of all trades, master of none

(not trying to make the case for CSS being good)

Re: The complete guide to centering a div

#140

Post by jimhart3000 »

sopooneo wrote: post #105
voltagex_ wrote: post #94

Earlier quoted context omitted.

Depending on how you do the layout it also may not play well with screenreaders.

Why do people care about screen readers? Is it because they are good people and want to make sure sight-impaired visitors are able to access their content? Or is it because they have contracts that require 508 compliance?

Why does it matter why they care? Does doing it for 508 compliance somehow make it less important? It's simply the right thing to do.
Post reply on HN