在 IE7 中垂直居中块 <a>答案

【问题标题】：Vertical Centering a block <a> in IE7在 IE7 中垂直居中块 <a>
【发布时间】：2011-11-28 20:40:27
【问题描述】：

我正在尝试在 IE7（IE6，如果可能的话）中使块垂直居中，让我弄清楚一件事 - 我不是垂直居中实际元素，而是元素内的文本。这是我的 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 就可以了。我想尝试尽可能使用单个元素 - 它用于导航器，所以我不希望元素上的元素仅用于一个链接。

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

【问题讨论】：

标签： html css internet-explorer-7 internet-explorer-6

【解决方案1】：

使用display:inline-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>

参考文献

【讨论】：

【解决方案2】：

如果您知道它只是一行文本，请使用 line-height。

它远不是一个单一的元素，但你可以只使用一个实际的表格单元格。这很丑，但支持 IE6 是一件丑事。

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>

如果您知道链接会有一定的行数，您可以使用一个额外的元素和一个边距来居中。（例如<a><em>anchor text</em></a>、em { margin-top:12px }）

如果您不知道要居中的元素的高度，则需要表格单元格布局行为。在 IE6 中获得此功能的唯一方法是使用实际的表格单元格或 JavaScript。对不起。

【讨论】：

不，这就是为什么有一个“超长字”，它被设计成多行的，否则我会使用行高。
是的，确实是一个非常丑陋的解决方案。我对 IE6 没那么大惊小怪，一个 display: block;大部分都可以，但 IE7 是必须的。

【解决方案3】：

这是一个已知的错误。解决此问题的方法可能不适用于您的情况，即向元素添加一个 Float 并将其显示为 inline-block 以使 hasLayout 在 IE 中工作。我还将提供 FF2 hack 来解决那里的问题。

固定代码：

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>

编辑

我没有添加浮点数，因为我认为使用其他 hack 没关系。

【讨论】：

它缺少 54px 的高度，添加后......它在最新的浏览器中也不起作用......看：jsfiddle.net/KqraT/5

【解决方案4】：

你为什么不试试填充？

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

<a>Hello superlongword</a>

这肯定适用于至少 IE7 的跨浏览器（无法在 IE6 上测试），example

【讨论】：