spin.js 顶部选项不起作用

Question

我尝试使用 spin.js

我希望它在 div 元素的中间弹出。所以我设置了：

职位：'relative' 顶部：'50%' 左：'50%'

但是顶部选项不起作用。分析问题后，我可以将其分解为 html/css 问题：

<div style="background-color: red">
    <div style="position:relative; height:20px; width:20px; top:50%; left:50%; background-color:blue"></div>
    1st div line<br>br line<br>br line 2
    <div>div line 1</div>
    <div>div line 2</div>
</div>

在此示例中，蓝色元素应位于红色元素的中间，但事实并非如此。这是它的填充物：

http://jsfiddle.net/exu77/obcg3cxv/

这是原始版本的插件 spin.js

http://plnkr.co/edit/qwjArDtnqGZQgbkQiRYt?p=preview

Answer 1

我可以通过向 jsSpinner 添加高度来让它工作 div。

<div id="jsSpinner" style="background-color:red; height: 100px;">spin in the red part
<br>br line
<br>br line 2
<div>div line</div>
<div>div line 2 </div>

至于为什么这样行得通？那部分我不知道。

Answer 2

position:relative 必须应用于 parent 元素，即包含微调器的 div。微调器本身需要 position:absolute（这是默认值）。这是你的 plunker 的更新版本，其中微调器在红色框内居中：http://plnkr.co/edit/GstXJdzyDtBIyMLuzbcY?p=preview

spin.js 顶部选项不起作用

spin.js top option does not work

javascript

spin.js