垂直居中<a>在IE7中</a>的块

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

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 2

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. (eg <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 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