Question

我试图让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就可以了。我想尝试尽可能多地使用单个元素 - 这是导航器，所以我不希望元素仅用于一个链接。

修改
我决定选择精灵，导航员会更容易 - 不是最好的解决方案，但我会对结果感到满意。如果任何发布的解决方案确实有效，我会交换它们。：）

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

<强>参考

Answer 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。遗憾。

Answer 3

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

固定代码：

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>

修改

我没有添加浮动，因为我认为使用其他黑客，这没关系。

Answer 4

你为什么不尝试填充？

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

<a>Hello superlongword</a>

对于IE7至少可以使用crossbrowser（无法在IE6上测试），example

垂直居中一块<a> in IE7</a>

4 个答案:

修改