Text Centering Problem Using CSS with IE

Question

I'm working on a site, and am having trouble getting text within a table to appear centered in IE. Firefox 2, 3 and Safari all work fine, but for some reason, the text won'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 position:relative;

to no avail. Any help?

Answer 1

In general it seems that IE and CSS go together like Bill Gates and an iPod.

Answer 2

Can we see more code? My first hunch is the table cell needs the text-align: center.

Answer 3

Bloodhound, I'll give it a shot. Gimme a sec.

Answer 4

The text-align: center should be sufficient, since you're centering the text inside a block element (h2) - adjusting the margins will change the position of the block, not the text.

I wonder if it's just that IE is having a dummy-spit at that font declaration you've got there?

Answer 5

That did it. Thanks! This site's pretty sweet.

Answer 6

Use text-align:center in the div/td that surrounds the h2.

<table style = "width:400px;border:solid 1px;">
    <tr>
        <td style = "text-align:center;"><h2>hi</h2></td>
    </tr>
</table>

edit: wow, stackoverflow's community is pretty fast!

Answer 7

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">
    <h2 style="margin: 0 auto">Some text</h2>
</div>

Answer 8

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.

Answer 9

I'm really banging my head on this one.

The site looks great in everything but IE7 and I've tried everything I know to make it center.

http://talentforceinc.com/Employers%5FHome.html

I've got conditional CSS for IE declared, and have added inline text-align:center tags, but for an unknown reason the text in the multi-colored bar on the left isn't centering.

Any thoughts?

Yes, I know the code is ugly right now - but it's all mucked up in my attempts to center things up.

Thanks in advance for any input.

IE Developer Tools are not the same as Firebug....