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

151–160 of 297 posts

Re: How to Center in CSS

#151

Post by nness »

lnanek2 wrote: post #37
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

Hmm, that http://flexboxin5.com/ site didn't work in Chrome at all. Claimed it was going to resize when I pressed resize it early on and did nothing.

No issues with Chrome 42 on OSX 10.10. That said, that particularly site its quite complex in how it handles updating the DOM, so might not be the best example anyway.

Re: How to Center in CSS

#152

Post by nness »

tjic wrote: post #91
lucideer wrote: post #70

Earlier quoted context omitted.

This comment doesn't make any sense. A list is a thing, just as a table is... What are you trying to say?

Down vote for "doesn't make sense". It made perfect sense to me. The phrase you were looking for is " I don't understand what you're saying."

The phrase the poster was looking for was that "the example provided was hyperbole." Your comment is far too confrontational.

Re: How to Center in CSS

#153

Post by lisper »

pcwalton wrote: post #82
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; }

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.

This is a big step in the right direction, but I'm afraid it's still broken. Centering things in this way breaks the
tag. It works inside text but now fails between elements. For example:

    foo
baz
renders correctly as

foo bar

but foo
bar renders as foobar.

And AFAICT it doesn't work at all in Safari even with vendor prefixes.

Re: How to Center in CSS

#154

Post by kagamine »

ommunist wrote: post #139
cyphunk wrote: post #51

Earlier quoted context omitted.

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.

Yes, you are right. As long as people are using HTML mail, tables for layout are the only way to go.

I have a gift for you! : /s

Re: How to Center in CSS

#155

Post by pjmlp »

wycats wrote: post #135
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.

It's legitimate for people to point out that these fixes are not universally available, because many people still need to support old versions of IE. That said, I think it's important for people to understand that many of the problems that people have canonically associated with the web's incompetence have been "solved" in standards for a number of years. There's a real difference between problems that remain unsolve…

The problem is that it doesn't matter only to IE, but to every version of a specific browser.

Nowadays people are not only using desktop computers. Many of the computer form factors used nowadays almost never update, yet one needs to support them.

EDIT: Typo version => browser.

Re: How to Center in CSS

#158

Post by im3w1l »

nness wrote: post #150
EdiX wrote: post #131

Earlier quoted context omitted.

Open up any webpage and count how many divs with no other purpose but to serve as CSS anchors there are. We traded in non-sematic tables for non-sematic divs.

The element has no semantic meaning, screen-readers don't read them and they have no intrinsic behaviour unless associated with an aria tag.

Why couldn't we just have made non-semantic tables? In addition to the semantic tables, I mean.

Re: How to Center in CSS

#160

Post by kagamine »

actionscripted wrote: post #49
sondr3 wrote: post #19

Earlier quoted context omitted.

Which is why you use something like AutoPrefixer to automagically generate the needed browser prefixes and such, makes it a whole lot easier.

Which still doesn't cover older browsers just prefixes things appropriately for those that support it.

But for older browsers you can use the old specification too. This means including the old specification before the new one in the CSS block; that will provide a warning in the web-inspector. Then you will need a hack for here is a sample (btw, it's so long ago now, I included modernizer.js and slectivizr.js but I have no idea if they were anything to do with this >_
    	#box_content {
	/* 1st draft flexbox required for IE8 layout using 'flexie' */
		display: -moz-box; display:-webkit-box; display: -ms-box;
	display: box;
		-webkit-box-orient:horizontal; -moz-box-orient:horizontal; -ms-box-orient:horizontal;
	box-orient: horizontal;
		-webkit-box-align:center; -moz-box-align:center; -ms-box-align:center;
	box-align:center;
		-webkit-box-direction:normal; -moz-box-direction:normal; -ms-box-direction:normal;
	box-direction:normal;
		-webkit-box-pack:center; -moz-box-pack:center; -ms-box-pack:center;
	box-pack:center;

	/* 2013 flexbox! for FF3+, Safari3.2+, Chrome5+ */
	display: flex; 
		display: -moz-flexbox; display: -webkit-flexbox; display: -ms-flexbox;
	flex-flow: row wrap;
	justify-content: space-around;
	padding-bottom: 1.5em;
	}

		.phonebox, .addressbox, .qrbox, .emailbox {
			max-width: 250px; min-width: 200px;
			height: 165px;
			display: block;
			border-radius: 20px;
			color: #4d4d4d;
			box-shadow: 2px 2px 9px #333;
			border: 1px solid #A2E86C;
			margin-top: 0.5em;/* req. for small screens */
			/* More flexbox for older browsers (flexie.js)*/
			-webkit-box-flex:0; -moz-box-flex:0;
			box-flex:0;
			-webkit-box-ordinal-group:1; -moz-box-ordinal-group:1; -ms-box-ordinal-group:1;
			box-ordinal-group:1;
		}
Post reply on HN