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

71–80 of 297 posts

Re: How to Center in CSS

#71

Post by nness »

cyphunk wrote: post #51
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; }

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.

Comparisons to print designers misses the biggest point about web design, that is that we have no way to guarantee a width, a position or even choice of font. Print designers know an A4 page is always 210x297mm, web designers have no idea what to expect.

Re: How to Center in CSS

#72

Post by neya »

Wow, this IS a huge pain solver. I can't simply recall how many nights I've been spending trying to fix the centering in CSS during my early days as a frontend dev. Thank you,bookmarked!

Re: How to Center in CSS

#73

Post by rtpg »

cyphunk wrote: post #58
psychometry wrote: post #54

Earlier quoted context omitted.

No, use divs and table-cell display values if you want to have non-tabular data displayed like a table.

Indeed I have non-TABular data and yet I should use TABle-cell? I'll just stick with the actual then. cleaner. But the real problem is "use divs". plural. so already breaking the #container_of_container cruft rule. I'd rather write some javascript with overly nested callbacks and leave the html clean. thanks.

Just a practical consideration, but the HTML table tag is actually a lot more restrictive ( can only contain or , so no wrapping span to regroup some table rows) than using s. Can be important depending on third party libs.

Re: How to Center in CSS

#74

Post by encoderer »

supercoder wrote: post #55
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.

I also find it crazy how there was a huge campaign to remove use of the table tag for layout. 'It's non semantic! You're mixing layout and content!' people would cry over and over. .. But then we've ended up with bootstrap and it's grid layout, where we're doing exactly that, and for some reason it's perfectly fine.

This owes at least in part to the fact that tables are not optimized for page layout. And that was especially true 10 years ago. Popular browsers couldn't render partial tables, and you had even more performance problems nesting them.

Grid based layouts are obviously useful but the table tag isn't the right tool.

Re: How to Center in CSS

#75

Post by cyphunk »

SimeVidas wrote: post #52

All the people who are still perplexed by this, have to admit that they haven’t heard of or tried flexbox. It works beautifully (in conjunction with Autoprefixer).

flexbox will be nice. once widely supported.

dynamic both v and h aligned center

Re: How to Center in CSS

#76

Post by cyphunk »

lucideer wrote: post #68
supercoder wrote: post #55

Earlier quoted context omitted.

I also find it crazy how there was a huge campaign to remove use of the table tag for layout. 'It's non semantic! You're mixing layout and content!' people would cry over and over. .. But then we've ended up with bootstrap and it's grid layout, where we're doing exactly that, and for some reason it's perfectly fine.

The objection to tables for layout was never on the basis of grid layouts being bad, it was on the basis of separation of concerns. The primary problem with layout tables was that they involved tightly coupled inlining of your layout rules.

I have not found a project yet that I could divorce the layout from the content without the use of javascript. i gave css many attempts at this. mainly from the desire to make the content easy to manage for others. or just for aesthetics. but css was (is) too clunky to make that separation. yet people still argue that not limiting yourself to what css can provide you, thereby giving up on the purity of content vs layout separation debate, is somehow blind use of web standards. i've since assumed css's goal was lofty from the start.

Re: How to Center in CSS

#77

Post by zaidf »

cyphunk wrote: post #51
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; }

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.

But if you are still using the table tag for anything but tabular data, you're living in the 1900s and arent cut out as a modern day web designer /snark

Re: How to Center in CSS

#78

Post by andrewliebchen »

All mediums have constraints. Perhaps our designs should be better a working within those constraints. Obviously, vertically centering in all situations is something CSS doesn't do so well in some situations and just fine in others. Know the situations in which it doesn't work and design another solution.

Re: How to Center in CSS

#79

Post by pcwalton »

supercoder wrote: post #55
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.

I also find it crazy how there was a huge campaign to remove use of the table tag for layout. 'It's non semantic! You're mixing layout and content!' people would cry over and over. .. But then we've ended up with bootstrap and it's grid layout, where we're doing exactly that, and for some reason it's perfectly fine.

The problem with tables for layout is that the layout algorithm is incredibly complex. People seem to think it's simple, because it kinda does the "right thing" in many cases, but it's actually ill-defined, varies between browsers, and has only a work-in-progress spec [1]. Width calculation is defined in terms of linear interpolation between the closest of four "candidate guesses" which bound the available width. And that's the simple case, when no colspans are involved; check the WIP spec for details on the recurring sequence that is involved when there are column spans…

Regardless of how you feel about CSS 2.1, it's indisputably better than the table-based layout we had before. Speaking as someone who has implemented both table-based layout and CSS 2.1, it's really unfortunate to see people want to return to the bad old world.

[1]: http://dbaron.org/css/intrinsic/

Re: How to Center in CSS

#80

Post by Retra »

lucideer wrote: post #68
supercoder wrote: post #55

Earlier quoted context omitted.

I also find it crazy how there was a huge campaign to remove use of the table tag for layout. 'It's non semantic! You're mixing layout and content!' people would cry over and over. .. But then we've ended up with bootstrap and it's grid layout, where we're doing exactly that, and for some reason it's perfectly fine.

The objection to tables for layout was never on the basis of grid layouts being bad, it was on the basis of separation of concerns. The primary problem with layout tables was that they involved tightly coupled inlining of your layout rules.

Unfortunately, CSS doesn't really fix that problem.
Post reply on HN