垂直对齐不使用 display:table-cell ，需要工作 IE6答案

【问题标题】：Vertical align without using display:table-cell , needs to work IE6垂直对齐不使用 display:table-cell ，需要工作 IE6
【发布时间】：2012-07-11 01:31:15
【问题描述】：

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

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

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

有什么想法吗？

非常感谢

戴夫

【问题讨论】：

链接中设置top: 25%;有问题吗？
别忘了额外收费 IE6 兼容性。
我们的 jsFiddles 都没有在 Adobe Browserlab 中正确显示。
顶部：25% 不起作用，因为它们与顶部的高度相同，包括跨越 2 行的高度

标签： html css

【解决方案1】：

如果您想在每个 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");

【讨论】：

【解决方案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;

}

【讨论】：

【解决方案3】：

很遗憾，我现在没有 IE6 访问权限，但试试这个：

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

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

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

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

【讨论】：