Question

我试图将我的链接垂直对齐到列表中间

我无法使用表单元格显示或行高，因为它需要在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中：

如果你可以将锚标记的高度设置为固定数字，那么the following可以起作用：

#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%;
}

如果您不知道列表项的高度，则可能必须使用this之类的javascript：

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

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

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

之类的操作

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

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

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

垂直对齐而不使用display：table-cell，需要工作IE6

3 个答案: