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

问题描述

我试图让垂直居中在IE7（IE6，如果可能的话）块，让我得到一个清楚的东西 - 我不是垂直中心的实际元素，而是元素内的文本。这是我的CSS和HTML，它在IE8及以上版本，但不能低于。

  a {
 display：table -细胞; 
 width：100px; 
 height：54px 
 background：black; 
 color：white; 
 text-align：center; 
 text-decoration：none; 
 vertical-align：middle; 
} 
 
< a href =＃> Hello superlongword< / a> 
  

现在我知道IE6实际上已经死了，如果可能的话，我还是想支持它，那么IE7就好了。我想尽量保持它与一个单一的元素尽可能 - 这是一个导航，所以我不想要的元素只是一个链接。

EDIT


我决定使用sprites，导航器会更容易 - 不是最好的解决方案，但我会很高兴结果。如果任何发布的解决方案工作，我会切换到他们。 ：）

解决方案

使用 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>在固定尺寸的块框中垂直居中的内容< / a> < span id =placeholder>< / span> < / div> < / div>  

• CSS垂直居中




• IE7- / Win img，vertical-align middle

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

解决方案

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

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