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

141–150 of 170 posts

Re: The complete guide to centering a div

#141

Post by bergie »

Lerc wrote: post #99
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 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…

With the GSS constraint solver stuff like this becomes very easy...

  #div[center-x] == #container[center-x];
(note that this is fully source order independent. It doesn't matter where in DOM the elements #div and #container are)

Re: The complete guide to centering a div

#144

Post by pjmlp »

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?

This is why, even though I have been doing on and off web development since 2000, I jump of joy when allowed to do native UI coding instead.

Re: The complete guide to centering a div

#145

Post by robmcm »

pjmlp wrote: post #144
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?

This is why, even though I have been doing on and off web development since 2000, I jump of joy when allowed to do native UI coding instead.

Most native frameworks provide tools to position elements, although at the end of the day they are just positioning things on an x,y,z axis.

Using CSS and JS you can do the same thing, respond to events and re-position your elements.

The problem is, people get preachy about how you shouldn't use JS for this, because websites should be progressive and degrade gracefully. Native code doesn't have this problem as much as it's not only accepted, but viewed as cool when you only support the latest OS version (iOS7).

Re: The complete guide to centering a div

#146

Post by robmcm »

unclebucknasty wrote: post #130
jebblue wrote: post #62

Earlier quoted context omitted.

Right, to me plain HTML tables are great for overall master page layout yet it seems everything I've read and the few web geniuses I've met will deride using them over CSS.

Exactly. I mean, I get the part where people are against layout with tables in principle. I just hate the part where they act like CSS is a good alternative in practice.

Even better is to draw everything in a canvas!

Re: The complete guide to centering a div

#147

Post by grannyg00se »

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

That's great! And it seems to have pretty good browser support.

Re: The complete guide to centering a div

#149

Post by stdbrouw »

coldtea wrote: post #132
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 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-designed API, the alternative tends to be nothing.

Post reply on HN