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

101–110 of 297 posts

Re: How to Center in CSS

#101

Post by sondr3 »

tedunangst wrote: post #95
pcwalton wrote: post #82

Earlier quoted context omitted.

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.

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.

I'm pretty sure flexbox can solve two column layouts very well, just not with one continuous piece of text.

Re: How to Center in CSS

#102

Post by lucb1e »

This looks really useful. In case the author reads this, one addition it could use is explaining why the given css works. And, like someone else already mentioned, indicate browser support. I haven't used this display:table-cell before and I wonder about its support. A small thing to lookup, sure, but it would be nice built-in. Or selecting which browsers you need to support and using flexbox when possible.

Re: How to Center in CSS

#103

Post by encoderer »

cyphunk wrote: post #76
lucideer wrote: post #68

Earlier quoted context omitted.

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

Have you seen some of the amazing things that can be done even in css 2.1?

Honestly sure you need js for most interactions and animations still, but layout? I wouldn't merge any pr that uses js for layout. Including fully responsive layouts.

Re: How to Center in CSS

#105

Post by encoderer »

nulltype wrote: post #93
SquareWheel wrote: post #81

Earlier quoted context omitted.

I'd agree it's not completely divorced, but it's much, much better than it used to be. If you've worked in environments where the only access you have is CSS (for instance, locked down CMSes, or editing subreddits), you'll find that many solutions are possible without manipulating HTML. CSS can be very powerful; especially with the advanced selectors of CSS3.

I think I'd rather just manipulate HTML with Javascript. At least then I only have one problem, which is HTML with inline styles. No separate CSS file to maintain or CSS rule precedence to worry about.

You forgot the performance problem....

Re: How to Center in CSS

#106

Post by nikanj »

pcwalton wrote: post #79
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 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…

A basic rule of universe is that complexity remains, you can merely shift it around. The table layout algorithm might be incredibly complex, but I'd rather have a browser writer have the headaches than me.

Re: How to Center in CSS

#107

Post by madeofpalk »

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.

`display: table` and `display: table-cell` are just layout algos, commonly used for creating a table-like layout.

Re: How to Center in CSS

#108

Post by visarga »

sondr3 wrote: post #101
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.

I'm pretty sure flexbox can solve two column layouts very well, just not with one continuous piece of text.

It would seem there is less than 92% support for flexbox yet.

Re: How to Center in CSS

#109

Post by pcwalton »

tedunangst wrote: post #95
pcwalton wrote: post #82

Earlier quoted context omitted.

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.

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.

CSS multicolumn layout is four years old. It's implemented in all the major browser engines, and many popular sites like Wikipedia use it. http://www.w3.org/TR/css3-multicol/

Re: How to Center in CSS

#110

Post by pcwalton »

nikanj wrote: post #106
pcwalton wrote: post #79

Earlier quoted context omitted.

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…

A basic rule of universe is that complexity remains, you can merely shift it around. The table layout algorithm might be incredibly complex, but I'd rather have a browser writer have the headaches than me.

> The table layout algorithm might be incredibly complex, but I'd rather have a browser writer have the headaches than me.

Completely disagree. The Unix philosophy is right when it comes to layout: you want to be simple, fast, and predictable.

This attitude is also why we are in a situation where the Web is slow compared to native platforms. Simple things tend to be fast things. Complex things tend to be slow things.

Post reply on HN