2

我正在尝试编写一个小的 jQuery 插件，它将根据 div 的高度垂直居中，

基本上在我的css中我有top: 50%，但由于高度是可变的，我需要计算这个。

这个的 HTML 看起来像

<div class="button-wrapper js-center" data-center="vertical" style="margin-top: 0px;"
    <span class="sub-text">Multiline text with two lines</span>
    <a href="" class="shop-btn">Shop_</a>
</div>

在我的插件中，我尝试记录高度，但它一直返回零：

console.log($el);
console.log("$el.outerHeight(): " + $el.outerHeight());
console.log("$el[0].scrollHeight: " + $el[0].scrollHeight);

// output:
$el.outerHeight(): 0
$el[0].scrollHeight: 0

当我使用开发工具检查时，它看起来像这样： 在此处输入图像描述

所以我想知道可能会出现什么问题，供参考，这是我正在（尝试）编写的插件：http: //pastebin.com/Qz7BgkcG

编辑：这是在.button-wrapper

.button-wrapper {
    width: 250px;
    left: 50%;
    top: 50%;
    margin-left: -125px;
    position: absolute;
    z-index: 100; 
}

编辑2：使用所有css重新创建，但我在这里没有遇到同样的问题：http: //jsfiddle.net/8Etex/

4

1 回答 1

0

我想知道这个问题是否是因为 jQuery 的 .height() 方法返回元素的计算高度而不是实际的盒子模型（参考：API 文档）。

如果我查看您在上面的 jsFiddle 中创建的元素，您会看到 Firefox 无法识别绝对定位元素的计算高度。这意味着它只会返回零。例如，如果我在 CSS 中的元素上强制使用 height 属性，则计算的尺寸将被更新并且我可以检索一个值。

火狐调试工具

于 2013-08-08T02:13:45.707 回答