Centring text in IE

Hi guys,
I’m trying to centre the text in this menu but IE doesn’t want to play the game. It’s centres in chrome, safari and FF. Any ideas?

http://buildinternet.com/live/smoothmenu/animated-menu.html

I am assuming that you mean centers vertically!

I have viewed it in IE8 and it does center vertically but I also get a list disc. Switch the browser to emulate IE7 and the text is positioned at the top.

In chrome the <p> tag has a margin-top of 1em set by the default attributes of the browser and that is why it appears to center vertically.

Thanks for your help.

Yes i mean center vertically.

“In chrome the <p> tag has a margin-top of 1em set by the default attributes of the browser and that is why it appears to center vertically”

So to fix this if remove <p> tag and margin-top of 1em this will position text at top in chrome. I then start again with re-positioning?

Alternatively in the style sheet set margin-top: to 1em for p.

All browsers including IE should then appear correct.

There is a chance that it will not make any difference at all in IE and there is something else going on. But we can investigate further if that is the case.

Hi,

Usually to center non wrapping text in a block like that the easiest way is to set the line-height to the same as the height of the block that you want to centre it in. You don’t have to guess then as long as you know the height.

e.g.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
div {
    height:50px;
    background:blue;
}
p.test {
    margin:0;
    padding:0 10px;
    line-height:50px;
    color:#fff;
}
</style>
</head>
<body>
<div>
    <p class="test">Test</p>
</div>
</body>
</html>


Of course the same effect can be done with trial and error by adding margins or padding to move the element into position.:slight_smile:

*** Thanks PhilipToop. I removed the <p> altogether then used margin-top: which worked a treat! Thanks for your help mate!

*** Paul O’B - What a great tip! Thanks, I’ll give it a go. I thought if you did this the text would sit to the bottom… why does it center it?

It just does lol :). You’d have to understand the inline formatting model to really understand why.

Basically if the line height matches the height then it will vertically center it.

Though it doesn’t work for more then 1 line of text :slight_smile:

Awsome!! Thanks heaps :slight_smile:

PS. X browser too?

If you are asking if line-height method will work cross browser then yes :).

Yes thank you :slight_smile:

By the way… congrats on the CSS Guru of the Year!! Nice work!

Thank you :).