Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Text Centering Using CSS not working in IE

I am having problems getting text within a table to appear centered in IE.

In Firefox 2, 3 and Safari everything work fine, but for some reason, the text doesn't appear centered in IE 6 or 7.

I'm using:

h2 {
  font: 300 12px "Helvetica", serif; 
  text-align: center; 
  text-transform: uppercase;
}

I've also tried adding margin-left:auto;, margin-right:auto and position:relative;

to no avail.

like image 873
Shady Studios Avatar asked Sep 16 '08 01:09

Shady Studios


3 Answers

CSS text-align property should be declared on the parent element and not the element you are trying to center. IE uses text-align: center property to center text. Firefox uses margin: 0 auto and it has to be declared on the element you are trying to center.

<div style="text-align: center">
    <h2 style="margin: 0 auto">Some text</h2>
</div>
like image 113
Alex Achinfiev Avatar answered Sep 22 '22 18:09

Alex Achinfiev


The table cell needs the text-align: center.

like image 41
Mike Becatti Avatar answered Sep 25 '22 18:09

Mike Becatti


Might be a typo, but you are missing a semicolon here:

margin-left:auto; margin-right:auto position:relative;

Should be:

margin-left:auto; margin-right:auto; position:relative;

If that doesn't work, make sure the element you are trying to center the text on has some width. Try setting the width to 100% and see if anything changes.

like image 40
dawnerd Avatar answered Sep 21 '22 18:09

dawnerd