CSS Centering Issues

I’m creating a html page that will be used as the source of a toolbar “app”. I want the text link to be centered both vertically and horizontally. The code below works fine in FireFox, but in IE the text link is not properly centered.

FireFox:

IE:

<head>
<style type="text/css">
A:link {background: <?=$backcolor?>; text-decoration: none; font-weight:bold; color: <?=$forecolor?>}
A:visited {background: <?=$backcolor?>; text-decoration: none; font-weight:bold; color: <?=$forecolor?>}
A:active {background: <?=$backcolor?>; text-decoration: none; font-weight:bold; color: <?=$forecolor?>}
A:hover {background: <?=$backcolor?>; text-decoration: underline overline; font-weight:bold; color: <?=$forecolor?>}
body
{
margin: 0;
padding: 0;
text-align:center;
}
.fnbar
{
font-family : Arial;
background: <?=$backcolor?>;
color: <?=$forecolor?>;
font-size: 12px;
}
</style>

<meta http-equiv="refresh" content="25">
</head>

<body

<div class="fnbar" style="display: table; height: 20px; text-align:center; width:175px; #position: relative; overflow: hidden;">
    <div style=" #position: absolute; #top: 50%;display: table-cell; vertical-align: middle;">
      <div style=" #position: relative; #top: -50%">
		<a target="_blank" href="http://www.sanctionedmedia.com/go.php?rlink=<?=$linkran?>" title="<?=$btitle?>"><?=$addchr?> <?=$Btext?> <?=$addchr?></a>
      </div>
	</div>
</div>

</body>

How can I fix for IE?

Thanks!

Hi,

If it’s a multi line element you can do this:


<!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=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
* {
    margin:0;
    padding:0
}
.outer {
    position:relative;
    display:table;
    height: 250px;
    width: 300px;
    vertical-align: middle;
    text-align: center;
    border: 1px solid #CCCCCC;
    background:red;
    margin-bottom:10px;
}
.inner {
    width:100&#37;;
    display:table-cell;
    vertical-align:middle;
    position:relative;
}
.inner p {line-height:1.3;}
.inner a {text-decoration:underline overline;}
</style>
<!--[if lt IE 8]>
<style type="text/css">
.inner {top:50%;left:0;}
.inner p{top:-50%;    position:relative;}
</style>
<![endif]-->
</head>
<body>
<h1>Vertical align elements of different heights</h1>
<div class="outer">
    <div class="inner">
        <p><a href="#">THIS IS THE TEXT<br />CONTENT</a></p>
    </div>
</div>
</body>
</html>


If it was a single line that would never wrap then all you need do is set the line-height to the height of the box it sits in and it will automatically be vertically centred. The text could not be allowed to wrap though or it will break.

You might also want to check out

CSS Centering - Fun for all
http://www.maxdesign.com.au/articles/center/

They have some good information, especially with regards to centering things in IE.

For what it’s worth!

Thanks so much Paul_O’B! That worked perfectly. Much appreciated.

webgyver, thanks for the reference link.