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

161–170 of 170 posts

Re: The complete guide to centering a div

#161

Post by coldtea »

etler wrote: post #156
benihana wrote: post #103

Earlier quoted context omitted.

Anytime someone says CSS is well designed, ask them how to vertically center something and look at their face as they go through the five stages of grief. I'm pretty good at CSS I suppose, and it's not something you can learn logically and progressively. You have to learn all the weird nuances and quirks of it as well as the syntax. EDIT: speaking of CSS, if you want to know true pain and nothingness, try making resp…

Not too long ago I saw the best simple solution to vertical centering. It was so obvious: position: absolute; top: 50%; transform: translateY(-50%); Translate is processed at the end, meaning it is based on the final element height. This means it works with any element, even dynamic heights. Of course it only works on relatively new browsers, but translate is well accepted and on the path to being ubiquitous. The sty…

>Also, any time anyone complains about CSS, I just show them some pre-css code with `` tags and `bg-color` properties and insane tables. That gets them to shut up pretty quickly. :)

Nothing is insane about "tables". It behaves as a classical grid based layout system, even though it was not intended as such. That's why it was such a good fit.

As for the "font" tags and bg-color properties, nothing strange about them either -- at least nothing worse than a style="" tag. Besides, that's the formatting part, which CSS is quite good add, we're talking layout here.

Re: The complete guide to centering a div

#162

Post by coldtea »

stdbrouw wrote: post #149
coldtea wrote: post #132

Earlier quoted context omitted.

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 famil…

You seem to be very upset about all of this... The nice thing about semantic HTML is that any metadata and structured data is a part of the document itself instead of hidden away somewhere else through an API. This has its disadvantages (I'd rather interact with an API than scrape a website, even if it's all tidy and semantic) but it absolutely also has advantages. The usual alternative to semantic HTML is not a well…

>You seem to be very upset about all of this...

Which is neither here nor there regarding the validity or not of what I say, and a little rude to boot.

>The nice thing about semantic HTML is that any metadata and structured data is a part of the document itself instead of hidden away somewhere else through an API. This has its disadvantages (I'd rather interact with an API than scrape a website, even if it's all tidy and semantic) but it absolutely also has advantages. The usual alternative to semantic HTML is not a well-designed API, the alternative tends to be nothing

Which is fine too, since the usual case also is that nobody is consuming the raw html anyway except the browser.

Re: The complete guide to centering a div

#163

Post by maj0rhn »

sergiotapia wrote: post #44
maj0rhn wrote: post #5

This is a pointless post. Use the TABLE tag. Yes, it will violate the purity of CSS, but you can trust it, and it will make your day better because it will free you angst and from extensive cross-browser testing. Simple is better than complex. Straightforward is better than arcane.

God no, I just threw up in my mouth. Once your website is sufficiently complex, having to trail and which td belongs to what tr in which td is a NIGHTMARE. Don't do it people - coming from a front end developer. A backend developer has no business commenting on front end issues, just a javascript developer shouldn't really dive out advice on proper DBA procedure.

Using some discipline with indentation easily solves the issue of nesting table-related tags.

Also, I would gently recommend that asserting one's status is a poor substitute for discussion of an idea's merits. Dogmatism is always injurious.

Re: The complete guide to centering a div

#164

Post by olivier1664 »

hesslau_ wrote: post #92
DigitalSea wrote: post #71

My utmost favourite technique for centering unknown width and height DIV's/elements perfectly center in the page is using 2dtransforms. I've created a Codepen here that shows off the technique, it's simple and well supported IE9+: http://codepen.io/Figurated/pen/zcypx — if you don't need to support IE8 any more, it's a perfect solution.

My favourite technique: position absolute and top: 0 bottom: 0 left: 0 right: 0 also doesn't require a fixed width http://codepen.io/anon/pen/vsliJ

Your technique is less good (on IE11) when you resize the width of the browser. The text finish outside the div, while DigitalSea's solution works well.

Re: The complete guide to centering a div

#165

Post by coldtea »

etler wrote: post #158
stdbrouw wrote: post #149

Earlier quoted context omitted.

You seem to be very upset about all of this... The nice thing about semantic HTML is that any metadata and structured data is a part of the document itself instead of hidden away somewhere else through an API. This has its disadvantages (I'd rather interact with an API than scrape a website, even if it's all tidy and semantic) but it absolutely also has advantages. The usual alternative to semantic HTML is not a well…

I write my HTML semantically primarily for myself. It's far easier to read, debug, and develop when the structure makes sense and isn't littered with a dozen nested divs with incredibly complicated class names.

>I write my HTML semantically primarily for myself. It's far easier to read, debug, and develop when the structure makes sense and isn't littered with a dozen nested divs with incredibly complicated class names.

Sure, but nobody called for "a dozen nested divs". You can ease the same number of divs, semantically or not. Just make the styling targets are encompassing as they can be.

Re: The complete guide to centering a div

#166

Post by sergiotapia »

maj0rhn wrote: post #163
sergiotapia wrote: post #44

Earlier quoted context omitted.

God no, I just threw up in my mouth. Once your website is sufficiently complex, having to trail and which td belongs to what tr in which td is a NIGHTMARE. Don't do it people - coming from a front end developer. A backend developer has no business commenting on front end issues, just a javascript developer shouldn't really dive out advice on proper DBA procedure.

Using some discipline with indentation easily solves the issue of nesting table-related tags. Also, I would gently recommend that asserting one's status is a poor substitute for discussion of an idea's merits. Dogmatism is always injurious.

If you don't have the experience why would your novice opinion be valued?

Re: The complete guide to centering a div

#167

Post by etler »

coldtea wrote: post #161
etler wrote: post #156

Earlier quoted context omitted.

Not too long ago I saw the best simple solution to vertical centering. It was so obvious: position: absolute; top: 50%; transform: translateY(-50%); Translate is processed at the end, meaning it is based on the final element height. This means it works with any element, even dynamic heights. Of course it only works on relatively new browsers, but translate is well accepted and on the path to being ubiquitous. The sty…

> Also, any time anyone complains about CSS, I just show them some pre-css code with ` ` tags and `bg-color` properties and insane tables. That gets them to shut up pretty quickly. :) Nothing is insane about "tables". It behaves as a classical grid based layout system, even though it was not intended as such. That's why it was such a good fit. As for the "font" tags and bg-color properties, nothing strange about them…

It's not that bad when combined with other methods of positioning, but remember, back then there was nothing else available, meaning you had to use tables for everything. Of course, the biggest problem was the lack of classes, meaning you had to redefine every style on every element.

Re: The complete guide to centering a div

#169

Post by burgerguyg »

Maybe I'm thick. The article is dated February 2014, it says flexbox "currently lacks browser support, mainly in IE (version 10 has partial support and full support won't arrive until version 11). Chrome, Safari and Firefox have support but with browser vendor prefixes."

IE11 came out in preview in June 2013, released officially in November 2013, and at least IE and Mozilla are currently supporting it unprefixed (though Mozilla's multi-line flexbox fails last time I checked). This article is over 3 months out of date, if not more, but being presented as new and current.

Re: The complete guide to centering a div

#170

Post by tripzilch »

adwf wrote: post #48
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?

Next week: The complete guide to sticky footers! It's unbelievable just how annoying CSS can be for seemingly simple things.

In the case of sticky footers I'm all for the adage "if it's annoying to use, it should be annoying to style".
Post reply on HN