将块垂直居中< a& gt;在IE7中 [英] Vertical Centering a block <a> in IE7

问题描述

我正在尝试使IE7中的块垂直居中（如果可能的话，也可能是IE6），请让我说清楚-我不是将实际元素垂直居中，而是将元素中的文本居中。这是我的CSS和HTML，可在IE8及更高版本上使用，但不能在以下版本上使用。

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>

现在我知道IE6几乎已经死了，如果可能的话，我仍然想支持它，但是如果没有的话那么IE7就可以了。我想尝试将其尽可能地保留为单个元素-用于导航器，所以我不希望元素仅用于一个链接。

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. :)

推荐答案

将 display：inline-block 与占位符一起使用垂直对齐块超链接：

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>

参考

• CSS垂直居中

IE7- / Win img，中间垂直对齐

这篇关于将块垂直居中< a& gt;在IE7中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！