Vertical Centering a block in IE7

Question

I'm trying to get vertical centering a block in IE7 (IE6 if possible too), let me get one thing clear - I'm not vertically centering the actual element, but the text within the element. This is my CSS and HTML which works on IE8 and above, but not below.

a {
    display: table-cell;
    width: 100px;
    height: 54px;
    background: black;
    color: white;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
}

<a href="#">Hello superlongword</a>

Now I know IE6 is virtually dead, I'd still like to support it if possible but if not then IE7 is fine. I want to try keep it with a single element as much as possible - it's for a navigator, so I don't want elements upon elements just for one link.

EDIT
I've decided to go with sprites, it'll be much easier for a navigator - not the best solution, but I'll be happy with the outcome. If any posted solutions do work, I'll swap over to them. :)

Answer 1

If you know it will be just one line of text, use line-height.

It is far from a single element, but you could just use an actual table cell. It's ugly, but supporting IE6 is an ugly affair.

table {
    border: 0;
    border-collapse: collapse;
    height: 54px;
    width: 100px;
}
td {
    vertical-align: middle;
}
a {
    background: black;
    color: white;
    display: block;
    height: 100%;
    text-align: center;
    text-decoration: none;
}

<table><tr><td><a href="#">Hello superlongword</a></td></td></table>

If you know the link will be a certain number of lines, you can center using one extra element and a margin. (e.g. <a><em>anchor text</em></a>, em { margin-top:12px })

If you don't know the height of the element to be centered, you need table-cell layout behavior. The only way to get this in IE6 is with an actual table cell or JavaScript. Sorry.

Answer 2

Use display:inline-block with a placeholder element to vertically center the block hyperlink:

    <style type="text/css">
    #blockbox { width: 500px; height: 500px; border: 1px solid black;}
    #container, #placeholder { height: 100%; }
 
    #content, #placeholder { display:inline-block; vertical-align: middle; }
    </style>
    <div id="blockbox">
      <div id="container">
        <a id="content">
        Vertically centered content in a block box of fixed dimensions
        </a>
        <span id="placeholder"></span>
      </div>
    </div>

References

• CSS Vertical Centering

• IE7-/Win img, vertical-align middle

Answer 3

This is a known bug. The way to fix this, which may not be applicable in your situation, is to add a Float to the element and have it display as inline-block to make hasLayout work in IE. I will also supply FF2 hacks to get around issues there too.

Fixed code:

a { 
    display: inline-block;
    display: -moz-inline-stack; /*FF2 Hack*/
    zoom: 1; /*IE inline-block star hack*/
    *display: inline; /*IE inline-block star hack*/
    float: left; 
    width: 100px;
    _height: 54px; /*FF2 Hack*/
    background: black;
    color: white;
    text-align: center; 
    text-decoration: none; 
    margin: 0px auto;
}

<a href="#">Hello superlongword</a> 

EDIT

I didn't add a float, because I figured with the other hacks being used, it wouldn't matter.

Answer 4

Why don't you try a padding?

a {
    display: inline-block;
    overflow: hidden;
    padding: 20px;
    background: black;
    color: white;
    text-align: center;
    text-decoration: none;
}

<a>Hello superlongword</a>

That sure works crossbrowser atleast for IE7 (couldn't test on IE6), example