不使用display：table-cell进行垂直对齐，需要使用IE6

Question

我正在尝试垂直对齐列表中的链接

请参阅jsfiddle http://jsfiddle.net/TwFxN/

我无法使用表格单元格显示或行高，因为它需要在IE6中工作，而行高将无法工作，因为某些选项跨越了2行，

有任何想法吗？

非常感谢

戴夫

Answer 1

不幸的是，我现在没有IE6访问权限，请尝试以下操作：

#nav > li.rhombus {
    line-height: 5.0em;
}

#nav > li.rhombus a {
    line-height: 1;
}

这将设置<li />线的高度以匹配高度。 然后重置<a />的行高。

示例： http ： //jsfiddle.net/lnrb0b/TwFxN/2/

Answer 2

我没有访问IE 6的权限，但我认为这可以正常工作：

演示： http ： //jsfiddle.net/SO_AMK/2fYLX/

HTML：

<ul id="nav">
 <li class="rhombus"><a class="rhlink" href="#"><span>Home</span></a></li>
 <li class="rhombus"><a class="rhlink" href="#"><span>Listed<br> Securities</span></a></li>
 <li class="rhombus"><a class="rhlink" href="#"><span>Market<br> Update</span></a></li>
 <li class="rhombus"><a class="rhlink" href="#"><span>Membership</span></a></li>
 <li class="rhombus"><a class="rhlink" href="#"><span>Info</span></a>
</ul>

CSS：

#nav a.rhlink:link, #nav a.rhlink:active, #nav a.rhlink:visited {
    display: inline-block;
    padding: 0px 5px;
    text-decoration: none;
    color: inherit;
    position: relative;
    vertical-align: middle;
    top: 25%;
}

#nav > li {
    float:left;
    position:relative;
}

#nav > li.rhombus {
    float:left;
    position: relative;
    border: 1px solid black;
    font-family: Georgia;
    color: rgb(131,0,26);
    width: 8.3em;
    text-align: center;
    height: 5.0em;
    display: block;

}​

Answer 3

如果要在每个li中将每个单独的锚标签居中：

如果您可以将锚标签的高度设置为固定数字，则可以执行以下操作 ：

#nav a.rhlink:link, #nav a.rhlink:active, #nav a.rhlink:visited {
   display: block;
   padding: 0px 5px;
   text-decoration: none;
   color: inherit;
   position: absolute;
   top: 50%;
   font-size: 12px;
   margin-top: -12px;
   text-align: center;
   width: 90%;
}

如果你不知道列表项的高度，您可能需要使用JavaScript像这样 ：

$('a').each(function() {
    $(this).css("top", Math.max(0, (($(this).parent().height() - $(this).outerHeight()) /      2)) + "px");
});

如果要在窗口中将整个列表项居中：

如果ul标签的高度保持一致，则可以执行以下操作 ：

#nav {
    position: absolute;
    top: 50%;
    margin-top: -5em;
}

如果你想导航包，仍然会出现在正中央，你可能不得不求助于使用一些JavaScript像这样 ：

$('#nav').css("top", Math.max(0, (($(window).height() - $('#nav').outerHeight()) / 2) +              $(window).scrollTop()) + "px");​