Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

How to Center in CSS (2015)

howtocenterincss.com

Post reply on HN
Print view View original

61–70 of 74 posts

Re: How to Center in CSS (2015)

#61

Post by colejohnson66 »

enumjorge wrote: post #35
growt wrote: post #25

It doesn't solve vertical centering, but I am secretly still a fan of the center-tag. Just does what it's name implies in most situations. I still don't get why its avoided like the plague.

Earlier HTML had tags that styled elements. The community decided it would be better if styling was left to CSS and HTML simply described document structure. This way styling lives in one kind of file instead of two different places. I wouldn’t recommend using it for big or professional projects, but I guess it’s fine for personal stuff. Like the other comment said it’s an obsolete tag. Browsers tend try hard not to…

Didn’t HTML5 remove the tag? In that case, just seeing the HTML5 DOCTYPE should allow ignoring those elements (as in not styling them). For example, if I do:

    
        Text
...just treat the tags as tags:

    
        Text
I understand there are many websites following older standards, but I can wish (for HTML5 to have been “strict”)

Re: How to Center in CSS (2015)

#62

Post by colejohnson66 »

Semaphor wrote: post #46
freefal wrote: post #40

Earlier quoted context omitted.

Probably the same reason that (bold) and (italics) aren't used anymore. There's now a clearer delineation between document structure (described via tags) and style (described via CSS) than there was in the earlier HTML specs.

b and i are back though, but a little different ;) > The b element represents a span of text to which attention is being drawn for utilitarian purposes without conveying any extra importance and with no implication of an alternate voice or mood, such as key words in a document abstract, product names in a review, actionable words in interactive text-driven software, or an article lede. and > The i element represents…

To add to this: if you want to draw attention for reasons that don’t fit the and tag’s purpose, there’s .

Re: How to Center in CSS (2015)

#63

Post by RyanGoosling »

ChrisMarshallNY wrote: post #60
RyanGoosling wrote: post #23

Earlier quoted context omitted.

You don't need the style="text-align:center" on your wrapper element

> You don't need the style="text-align:center" on your wrapper element Why not? The goal is to center something with an unpredictable size. display:block adapts to the container. display:table adapts to the contents. This uses both.

A box isn't text. Why don't you give it a whirl.

Re: How to Center in CSS (2015)

#64

Post by ChrisMarshallNY »

RyanGoosling wrote: post #63
ChrisMarshallNY wrote: post #60

Earlier quoted context omitted.

> You don't need the style="text-align:center" on your wrapper element Why not? The goal is to center something with an unpredictable size. display:block adapts to the container. display:table adapts to the contents. This uses both.

A box isn't text. Why don't you give it a whirl.

Oh, I see. Gotcha. I use it for images and lists, so I've gotten used to it.

Cool. Thanks!

Re: How to Center in CSS (2015)

#65

Post by Chyzwar »

diablo1 wrote: post #57
viklove wrote: post #56

Earlier quoted context omitted.

Don't do this, you will run into edgecases that make things look jank. Use flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Thanks for the tip. Any particular browser that causes such 'jank'?

This would center a fixed sized element in absolute position to page, this was never an issue. Problems start when you do not know size of your element and its parent. Flex finally fixes[1] this issue but it was not fully supported until recently[2].

[1] https://philipwalton.github.io/solved-by-flexbox/demos/verti... [2] https://github.com/philipwalton/flexbugs

Most of the flexbugs are now fixed and flex should be recommended way of making layouts.

Re: How to Center in CSS (2015)

#67

Post by growt »

enumjorge wrote: post #35
growt wrote: post #25

It doesn't solve vertical centering, but I am secretly still a fan of the center-tag. Just does what it's name implies in most situations. I still don't get why its avoided like the plague.

Earlier HTML had tags that styled elements. The community decided it would be better if styling was left to CSS and HTML simply described document structure. This way styling lives in one kind of file instead of two different places. I wouldn’t recommend using it for big or professional projects, but I guess it’s fine for personal stuff. Like the other comment said it’s an obsolete tag. Browsers tend try hard not to…

I know, but I still think text ist more readable then most of the css workarounds we had to use in the past.

Re: How to Center in CSS (2015)

#68

Post by growt »

blauditore wrote: post #31
growt wrote: post #25

It doesn't solve vertical centering, but I am secretly still a fan of the center-tag. Just does what it's name implies in most situations. I still don't get why its avoided like the plague.

I've been doing HTML for ~10 years and have never seen this before. Apparently, it was deprecated with HTML4 already, though I'm not sure why.

Now I feel old. On the other hand, apparently I'm doing HTML for >20 years. Let me tell you about blink and marquee ... ;)

Re: How to Center in CSS (2015)

#69

Post by jacobedawson »

onion2k wrote: post #26
jacobedawson wrote: post #20

Having to still support IE 11 for most projects, I really like the following: div { position: absolute; right: 50%; bottom: 50% transform: translate(50%, 50%); }

IE11 supports most of flexbox. You don't need hacks.

forgot the <

Re: How to Center in CSS (2015)

#70

Post by perilunar »

MattGaiser wrote: post #66
6510 wrote: post #38

A wise man once said (me): ill use until the end of time and thy browsers shall support it. (did of course learn the new and improved ways to qualify the ignorance)

Google’s home page uses it three times.

HN wraps the whole page in a centre tag.
Post reply on HN