Question

我试图将一系列SPAN垂直居中于其父LI。

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

不确定获取内联元素（span）的高度是否有问题，任何建议都值得赞赏。

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

Answer 1

将您的范围设为block-level元素将为其提供height：

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

作为替代方案，您可以将范围更改为本机block-level elements之一。

Answer 2

我不确定目标是什么，但我确实有一个答案，为什么警报总是一样的。您使用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。

，菜单项的垂直居中可能会更容易

Answer 3

我不确定这是否适用于您的代码，但也许您可以通过使<li>元素内联块并将它们垂直居中来完全避免使用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。

用jquery获得跨度的高度

3 个答案: