本文介绍了垂直居中块< a>在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>  









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

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

08-31 02:52