html - 垂直对齐不使用 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>

​</p>

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");
});

​</p>

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

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

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

如果您希望导航包裹并仍然显示在确切的中心，您可能不得不求助于使用这样的小javascript：

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