IE Hack: CSS Centering – Another Reason I Hate Internet Explorer

So here’s another common Internet Explorer CSS hack that’s pretty popular and not too ugly.

Here’s The Problem

ie-css-min-height-hack

This is how normal people horizontally center block elements using CSS: You slap on a width (I mean, that should be obvious enough right?). Then you set the left and right margins to auto, and Voil , centered!

body #box {
	margin: 0 auto;
	width: 780px;
}

Well except in Internet Explorer and some older browsers.

Fixing The Problem

This one is a bit nicer than the CSS min-height hack. You need to use the text-align property to center for the element above, because Internet Explorer sucks and doesn’t understand the auto margin. Now too fix this, you need to reset the text-align to left.

body {
	text-align: center;
}

body #box {
	margin: 0 auto;
	padding: 56px 0 20px;
	width: 780px;
	text-align: left;
}

That’s it folks!