Centring text in IE

**rossnaumov** · Mar 11, 2010 01:46

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/smooth...ated-menu.html

**PhilipToop** · Mar 11, 2010 09:11

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.

**rossnaumov** · Mar 11, 2010 16:31

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?

**PhilipToop** · Mar 12, 2010 03:03

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.

**Paul O'B** · Mar 12, 2010 06:40

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.

Code:

<!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.

**rossnaumov** · Mar 14, 2010 16:02

*** 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?

**RyanReese** · Mar 14, 2010 16:18

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

**rossnaumov** · Mar 14, 2010 16:55

Awsome!! Thanks heaps

**rossnaumov** · Mar 14, 2010 17:09

PS. X browser too?

**RyanReese** · Mar 14, 2010 17:27

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

.

**rossnaumov** · Mar 14, 2010 17:37

Yes thank you

**rossnaumov** · Mar 14, 2010 17:39

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

**RyanReese** · Mar 14, 2010 21:42

Thank you

.

User Tag List

Thread: Centring text in IE

Thread Tools

Display

Centring text in IE

Bookmarks

Bookmarks

Posting Permissions