2

我正在尝试将一系列 SPAN 垂直居中于其父 LI 内。

返回的高度值都是相同的，这意味着这段代码一定有问题，因为一些跨度在两行上。

不确定获取内联元素（跨度）的高度是否有问题，任何建议表示赞赏。

HTML： 

<li class="nav-level-2-item">
    <a href="">
    <span class="menu-item">Text</span>
            </a>
            </li>

<li class="nav-level-2-item">
    <a href="">
    <span class="menu-item">Longer Text</span>
            </a>
            </li>

</ul>

JS：

$(document).ready(function () {

    var navItem = $('li.nav-level-2-item');

    navItem.each(function() {
        var containerHeight = $('li.nav-level-2-item').height();
        var spanHeight = $('span.menu-item').height();
        alert(spanHeight)
        $('span.menu-item').css('top', (containerHeight - spanHeight) / 2);
    });
});
4

3 回答 3

2

使您的 span 成为块级元素将给它height：

<style> span.menu-item { display:block /* or inline-block */; } </style>

作为替代方案，您可以将跨度更改为本机块级元素之一。

于 2013-09-26T20:23:12.700 回答
1

我不确定目标是什么，但我确实知道为什么警报总是一样的。您正在使用 迭代li元素.each()，但在每次迭代中，您并未引用当前项目，因此您始终检索第一个匹配元素的高度。尝试这个：

http://jsfiddle.net/5uwuQ/

$(document).ready(function () {

    var navItem = $('li.nav-level-2-item');

    navItem.each(function() {
        var containerHeight = $(this).height();
        var spanHeight = $('span.menu-item', this).height();
        console.log(spanHeight)
    });
});

通过设置line-height.

于 2013-09-26T20:25:26.477 回答
1

我不确定这是否适用于您的代码，但也许您可以通过将<li>元素设置为inline-block并将它们垂直居中来完全避免使用 jQuery：

li.nav-level-2-item
{
    display: inline-block;
    *display: inline; *zoom: 1; /* IE 6-7 hack */
    vertical-align: middle;
}

或另一种可能的解决方案：

li.nav-level-2-item
{
    display: table;
}

li.nav-level-2-item a
{
    display: table-cell;
    vertical-align: middle;
}

如需其他纯 CSS 解决方案，请查看http://phrogz.net/css/vertical-align和http://www.vanseodesign.com/css/vertical-centering。

于 2013-09-26T20:31:56.693 回答