Jump to content

other browsers not picking up text-align: center


deejaybet

Recommended Posts

Hmm... My guess is that you use text-align: center in for example your body tag, to center a page? The way to center for example a div isn't to put text-align: center in the containing element. Instead, put in the (in this example) div:margin: auto;It's IE that uses the text-align: center wrongly. As it implies, it is to be used for text, and text only. Non-formatted, raw text.

Link to comment
Share on other sites

ok you have just onfused me lol... the site works perfectly as it should in IE.. centered were is shoudl etc... but if i view it on other browsers say for example firefox... the site has some elements... mainly text aligned correctly but the page(s) go to the default setting (left side)

Link to comment
Share on other sites

Ok, put it like this:

STYLESHEETbody {text-align: center}HTML<body><div>Text here...</div></body>

That code will display a div in the center of the page, but only in IE, because the propertytext-align: center;is only meant to work on raw text within an element. Like if you had put text-align: center in a div { } in your css, it would display the text in the div centered within the div. To make elements align, you're actually not supposed to give the container element, in this case <body>, a value of text-align: center, but rather give the element itself a margin. But, for it to work in IE again, you need both... :)

STYLESHEETbody {text-align: center;}div {margin: auto;}HTML<body><div>Text here...</div></body>

That will work for all browsers, standards-compliant ones as well as IE.I could have just told you to put margin: auto in your css within the element you wanted to center, but I felt like explaining why text-align: center on elements only works in IE... :)

Link to comment
Share on other sites

margin: auto sets the same margin on the left and right side of the element, so yeah, it will display centered. IE needs body {text-align: center} to align the text centered. But margin: auto is the way it's supposed to be done. Microsoft just hasn't caught up with that yet.

Link to comment
Share on other sites

No.body {margin: 0px;}will make your body stretch to the full browserwindow. It has nothing to do with displaying the other stuff.div {margin: auto;}p {margin: auto;}table, tr, td {margin: auto;}whatever {margin: auto;}does not interfere with your body's margins...

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...