How to Center in CSS • Hacker News Board

Re: How to Center in CSS

#291

Post by talmand » Tue, Apr 21, 2015, 1:18 PM UTC

rivo wrote: post #290

talmand wrote: post #244

Earlier quoted context omitted.

What exactly is your centered div centering to if there's no container div? The .overlay div is the container, the .dialog div is centering itself as defined by constraints of .overlay. I'm failing to understand your expectations.

Let's say this is a modal dialog which is supposed to appear in the center of the screen, fixed (but the size is unknown and may scale with its contents). With any of the existing solutions, the HTML code for the dialog will always be ... , i.e. unnecessary DIVs due to the limitations of CSS. Since it is supposed to float on top of everything else, it does not matter what its container is. May as well be the tag but…

But the HTML you describe is required for the modal as you describe it. I guess I'm assuming you want something to darken the body content behind the modal, which is what the first div would be for.

Otherwise, if you don't need the darkening div behind the modal, you can easily create a centered modal with the container being the body tag. Without flexbox. Today.

Again, I don't understand your expectations.

Re: How to Center in CSS

#292

Post by talmand » Tue, Apr 21, 2015, 1:20 PM UTC

Touche wrote: post #284

talmand wrote: post #268

Earlier quoted context omitted.

Seems semantic to me. What would you suggest instead?

align: center; valign: center;

But what are you aligning? It seems to me that having "justify-content" is more semantic than "align".

Re: How to Center in CSS

#293

Post by RobertKerans » Tue, Apr 21, 2015, 8:49 PM UTC

pcurve wrote: post #260

RobertKerans wrote: post #148

Earlier quoted context omitted.

Allowing an arbitrary website to work on a phone isn't really a fad, though. In a few years time, there's not going be a huge sigh of relief as everyone gets back the fixed-width websites they've been crying out for.

"Allowing an arbitrary website to work on a phone isn't really a fad, though." Agreed, but current implementation is mostly terrible, with 6 break points, 1-2MB downloads, everything = single page app, etc. So the concept of write-once, run everywhere is not a fad, but the implementation is very fad-driven.

Ah, that's fair enough; I was thinking at a more conceptual (or even just CSS rather than JS) level.

Re: How to Center in CSS

#294

Post by TheLoneWolfling » Fri, Apr 24, 2015, 1:46 AM UTC

lloeki wrote: post #165

baddox wrote: post #124

Earlier quoted context omitted.

> 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.

Also, [0], since “All problems in computer science can be solved by another level of indirection, ...”. [0]: https://www.ostraining.com/blog/coding/bootstrap-right-way/

StackOverflowError

Re: How to Center in CSS

#295

Post by TheLoneWolfling » Fri, Apr 24, 2015, 1:53 AM UTC

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

JS;DR.

So: is it not degrading gracefully a property of the site, or a property of Flexbox?

Re: How to Center in CSS

#296

Post by ommunist » Sun, Apr 26, 2015, 5:33 PM UTC

quonn wrote: post #171

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).

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.

Sorry for my late reply. HTML email is separate media and separate (very large) business. Cost per lead acquired by using HTML mail is high. So is its market value. So any tool that makes life of HTML mail designer easier will be very much appreciated. Look at litmus.com business.

Re: How to Center in CSS

#297

Post by pcwalton » Tue, Apr 28, 2015, 1:29 AM UTC

tedunangst wrote: post #272

pcwalton wrote: post #109

Earlier quoted context omitted.

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/

Like I said, "working". I don't want two columns stretching ten feet long. I want two columns on this page, two on the next, two on the one after that...

That is indeed how multicol works when combined with pagination [1].

[1]: http://dev.w3.org/csswg/css-multicol-1/#pagination-and-overf...