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

171–180 of 297 posts

Re: How to Center in CSS

#171

Post by quonn »

ommunist wrote: post #137
sunst wrote: post #117

Earlier quoted context omitted.

i use this waty to solve my center problem,truly it works,but it lead other problems,like this: test test test test test test test test the flex will ruin the layout of the div,so how can i solve this problem?thank you

Spans are stripped out by Outlook 2010 in HTML mail. This is not edge case, as you may think. Most corporates are still on Outlook 2010 (and IE 6, especially large banks in the UK).

First, thank you for the information. It is still very much an edge-case, though. Most HTML ist published on the web, not in emails and most emails are plain text. A few have very simple formatting in HTML. Very few actually have a complex layout, and how many of those could possibly benefit for vertical alignment? And that tiny fraction, if viewed in Outlook 2010 will display - well - not centered.

Re: How to Center in CSS

#172

Post by castell »

ommunist wrote: post #137
sunst wrote: post #117

Earlier quoted context omitted.

i use this waty to solve my center problem,truly it works,but it lead other problems,like this: test test test test test test test test the flex will ruin the layout of the div,so how can i solve this problem?thank you

Spans are stripped out by Outlook 2010 in HTML mail. This is not edge case, as you may think. Most corporates are still on Outlook 2010 (and IE 6, especially large banks in the UK).

Outlook 2007+ use MS Word as email layout engine, instead of Trident (Internet Explorer). MS Word "web view" is based on Frontpage (which itself forked of trident) and produces broken HTML 4 output.

The HTML email world is stuck with HTML 4.1, inline CSS and many corner cases (worse than the IE6 era!).

Re: How to Center in CSS

#173

Post by robin_reala »

tokenizerrr wrote: post #163
dan1234 wrote: post #161

Earlier quoted context omitted.

And anyone who wants to browse with JavaScript disabled…

People who disable features of their browser on purpose will always be getting a degraded experience. No way around that.

People have JS disabled without their intent. Corporate security standards, broken JS in CDN served libraries, mobile proxy browsers, the list goes on…

Re: How to Center in CSS

#174

Post by TeMPOraL »

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…

And the things you do to properly align stuff in CSS are anything but simple. You took the complexity from the place where it could be well-defined and heavily optimized and have it to the hands of every developer to do it in their own, broken way.

Re: How to Center in CSS

#175

Post by asw13 »

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; }

p

Re: How to Center in CSS

#176

Post by yAnonymous »

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.

It's not the site that's broken, but Safari.

Re: How to Center in CSS

#177

Post by robin_reala »

rtpg wrote: post #73
cyphunk wrote: post #58

Earlier quoted context omitted.

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.

(…and , , )

Re: How to Center in CSS

#178

Post by voidz »

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…

The attitude is the result of a thing that just keeps annoying people. It's certainly not a cause of a slow web.

Re: How to Center in CSS

#179

Post by robin_reala »

WalterGR wrote: post #45
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

What's the best polyfill for flexbox?

Add autoprefixer to your build chain: https://github.com/postcss/autoprefixer

Re: How to Center in CSS

#180

Post by TeMPOraL »

castell wrote: post #172
ommunist wrote: post #137

Earlier quoted context omitted.

Spans are stripped out by Outlook 2010 in HTML mail. This is not edge case, as you may think. Most corporates are still on Outlook 2010 (and IE 6, especially large banks in the UK).

Outlook 2007+ use MS Word as email layout engine, instead of Trident (Internet Explorer). MS Word "web view" is based on Frontpage (which itself forked of trident) and produces broken HTML 4 output. The HTML email world is stuck with HTML 4.1, inline CSS and many corner cases (worse than the IE6 era!).

> The HTML email world is stuck with HTML 4.1, inline CSS and many corner cases (worse than the IE6 era!).

It might be for the better, actually. HTML5 and CSS3 are Turing-complete[0] so I can imagine that the moment they would be allowed, some clever marketing company would figure out new and impressive ways to use the new features to scam people. Er. I meant, "provide value-added content".

[0] - with user closing the loop, see http://beza1e1.tuxen.de/articles/accidentally_turing_complet... for links to an example.

Post reply on HN