html - 在 IE7 中垂直居中 block

Question

我试图在 IE7(如果可能的话，IE6)中使一个 block 垂直居中，让我弄清楚一件事——我不是垂直居中实际元素，而是垂直居中元素中的文本。这是我的 CSS 和 HTML，适用于 IE8 及以上版本，但不适用于以下版本。

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>

现在我知道 IE6 几乎已经死了，如果可能的话我仍然愿意支持它，但如果不是，那么 IE7 也很好。我想尝试尽可能地使用单个元素 - 它用于导航器，因此我不希望元素上的元素仅用于一个链接。

编辑
我决定使用 sprite，这对导航器来说会容易得多 - 不是最好的解决方案，但我会对结果感到满意。如果任何已发布的解决方案确实有效，我将换用它们。 :)

Answer 1

将 display:inline-block 与占位符元素一起使用，使 block 超链接垂直居中:

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

引用资料

• CSS Vertical Centering

• IE7-/Win img, vertical-align middle