text-align:center works in IE but not in Firefox

HTML, CSS tips and tricks #I

When things work in IE as we expect, we presume that it’s perfect and should work in other browsers too. text-align:center; or text-align:right; properties for layout works well in Internet explorer as we want but it doesn’t work in mozilla-family of browsers, why?

Well there is nothing wrong with Firefox or Netscape but something with IE, read the property again, text-align must be for alignment of the text inside an element and not the alignment of that element itself, right? This is why Firefox/Netscape will not align the element but the text inside it, and that’s perfectly alright! But IE on the other hand uses this property to align elements as well as text inside them to specified location, which is logically wrong as far as the alignment of elements is concerned.

Well anyways it works in IE, but then what is solution for Firefox/netscape if you want to align elements in the center/right?
It’s very simple, use margin:auto; (all margins top, right, bottom, left would be adjusted automatically) or use margin-left:auto; and margin-right:auto; to align the element in the center and use only margin-left:auto; to align the element to right.
Isn’t that logically correct? It is! It works for IE too.