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

221–230 of 297 posts

Re: How to Center in CSS

#221

Post by acjohnson55 »

baddox wrote: post #124
nikanj wrote: post #106

Earlier quoted context omitted.

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.

> A basic rule of universe is that complexity remains, you can merely shift it around. Not really. CSS grid systems (like in Bootstrap) require some ugly and non-semantic markup, but they're not very complex.

They don't require non-semantic markup -- as I said in a comment that was downvoted for some reason. There's a whole set of best practices that people aren't mentioning in this thread.

If you write your styles in the same preprocessor as the Bootstrap package you chose (Less by default, but optionally Sass), you can mix Bootstraps grid classes into your own semantically meaningful classes, and drop all the col-xs stuff from your markup. Your markup elements can have class names that are purely semenatic. Almost every modern grid system offers preprocessor mixins that can be used in this way.

There are methodologies like BEM that are great for providing a semantically meaningful layer of classes in your markup.

It's true that the complexity remains and is shifted. The important part is that it's no longer interlaced with the complexity that describes the fine-scale structure of the page.

There have been some huge deficiencies in CSS over the years. It is frustrating to have to use complex sets of counterintuitive rules to achieve seemingly simple effects. But there are techniques for helping to manage it in modern web development.

Re: How to Center in CSS

#222

Post by mrspeaker »

yAnonymous wrote: post #210
scotty79 wrote: post #196

Earlier quoted context omitted.

What's broken is not Safari but people who buy Macs. ... I can't go any deeper. Still I'd like my site to look good to a meaningful market share.

True, but I wouldn't say 4% is a meaningful market share, so fuck Safari. It's the new Internet Explorer. Leaving the sites broken in Safari (and maybe adding a notice that explains why it's broken) also helps keeping it at 4%.

As a web dev, I get it - but if you have a million visitors then you're saying "fuck you" to 40,000 people. If I was _paying_ a web dev, I'm not sure I'd be satisfied with this response.

Re: How to Center in CSS

#224

Post by protonfish »

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.

Your example does not align vertically, so I am not sure what you are trying to prove. This CSS will put something in the center of your screen quite easily

    position: absolute; top: 50%; left: 50%;
Is that so hard? Having poor CSS skills is not the same as CSS being broken.

Re: How to Center in CSS

#225

Post by anon4 »

pcwalton wrote: post #110
nikanj wrote: post #106

Earlier quoted context omitted.

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…

Given that the problem is not simple, I'm happy to have fast and predictable.

Re: How to Center in CSS

#226

Post by welly »

supercoder wrote: post #56
DiThi wrote: post #27

As others said, flexbox is a complete replacement for all layour hacks in CSS. This site helped me understand flexbox: http://flexboxin5.com/ Browser support: http://caniuse.com/#feat=flexbox

That site is completely broken in Safari. Don't think we're ready for flexbox just yet.

How is it "completely broken"? What version of Safari are you using because it is working perfectly fine when I use that site in Safari.

Re: How to Center in CSS

#227

Post by EStudley »

dkersten wrote: post #220
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.

Flexbox is nice and makes some things easier, but its still (IMHO) a half assed solution compared to something like QML's anchors. In QML I can center like this: anchors.centerIn: parent (replace parent with id of item you want to center in if not the parent item). You can also do just vertical or horizontal centering, or you can fill another item or you can anchor eg the left of your item the the right of another it…

I would love a flexible anchoring system like QML for CSS.

Re: How to Center in CSS

#228

Post by Springtime »

e98cuenc wrote: post #190
bonzini wrote: post #169

Earlier quoted context omitted.

Divs with display:table/table-row/table-cell _are_ non-semantic tables.

except divs lack colspan

I came across this issue recently and was surprised after all these years there still isn't colspan support. Ended up having to create additional containers when I should be able to style it using CSS.

Re: How to Center in CSS

#229

Post by iamcurious »

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.

A basic rule of universe is that complexity remains, you can merely shift it around.

You can always increase complexity. For instance, by doing all math in Roman Numerals. Thus, in at least some cases you can decrease it. So your statement doesn't hold.

I think you were referring to something like inherent complexity, but then you would have to somehow prove that all this complexity is inherent.

Post reply on HN