javascript 在（目标）div 内居中 spin.js 微调器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22603966/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Centering spin.js spinner inside a (target) div
提问by Andrei V
I have the following simple markup and style (see JSFiddle):
我有以下简单的标记和样式（请参阅JSFiddle）：
Html:
网址：
<div id="wrapper"><div id="content"></div></div>
CSS:
CSS：
#content {
background-color:lightyellow;
height:200px;
color:green;
}
#wrapper{
border:1px solid black;
color:red;
}
I'm setting the spinner target to the #contentdivusing both Vanilla JS and jQuery options and I encounter a couple of problems. First, in both cases, the spinner does not appear to be constructed in the middle of the targeted element's parent, contrary to what the documentation says:
我将微调器目标设置为#contentdiv使用 Vanilla JS 和 jQuery 选项，但遇到了一些问题。首先，在这两种情况下，微调器似乎都没有构建在目标元素的父元素的中间，这与文档所说的相反：
Positioning
Since version 2.0.0 the spinner is absolutely positioned at 50% of its offset parent. You may specify a top and left option to position the spinner manually.
定位
自版本 2.0.0 起，微调器绝对定位在其父级偏移的 50%。您可以指定顶部和左侧选项来手动定位微调器。
Second, when using Vanilla JS, the spinner does not use the color set on the target. When starting it using jQuery, it does (i.e. for #contentit uses green).
其次，在使用 Vanilla JS 时，微调器不使用目标上设置的颜色。当使用 jQuery 启动它时，它会（即因为#content它使用绿色）。
Am I understanding the documentation wrong? If so, how can I center the spinner inside a specific element? If not, why isn't the snippet above centering the spinner inside the target?
我对文档的理解有误吗？如果是这样，我如何将微调器置于特定元素内？如果不是，为什么上面的代码段没有将微调器置于目标内部的中心？
回答by Jamie Dunstan
Simply add
只需添加
position: relative;
to the #contentCSS rule.
到#contentCSS 规则。
CSS:
CSS：
#content {
background-color: lightyellow;
text-align: middle;
height: 200px;
color: green;
position: relative;
}
#wrapper {
border: 1px solid black;
}
See the updated JSFiddle here.
Edit:
编辑：
The jQuery plugin for spin.js will take on the color of the parent if you have not already set a color yourself on initialisation. This is because it has this additional functionality built in. In jQuery.spin.js (on line 65):
如果您尚未在初始化时自己设置颜色，用于 spin.js 的 jQuery 插件将采用父级的颜色。这是因为它内置了这个附加功能。在 jQuery.spin.js（第 65 行）中：
opts = $.extend(
{ color: color || $this.css('color') },
$.fn.spin.presets[opts] || opts
)
This will pick the color of the parent container and replace the color in the optsobject so that the spinner has the correct color.
这将选择父容器的颜色并替换opts对象中的颜色，以便微调器具有正确的颜色。
If you want to replicate this functionality in standard JavaScript, you could do something like this:
如果您想在标准 JavaScript 中复制此功能，您可以执行以下操作：
$(document).ready(function () {
var opts = {
lines: 17, // The number of lines to draw
length: 26, // The length of each line
width: 12, // The line thickness
radius: 3, // The radius of the inner circle
corners: 1, // Corner roundness (0..1)
rotate: 0, // The rotation offset
direction: 1, // 1: clockwise, -1: counterclockwise
color: '#000', // #rgb or #rrggbb or array of colors
speed: 1.1, // Rounds per second
trail: 74, // Afterglow percentage
shadow: true, // Whether to render a shadow
hwaccel: false, // Whether to use hardware acceleration
className: 'spinner', // The CSS class to assign to the spinner
zIndex: 2e9, // The z-index (defaults to 2000000000)
top: '50%', // Top position relative to parent in px
left: '50%' // Left position relative to parent in px
};
//$('#content').spin(opts);
var target = document.getElementById('content');
opts.color = getComputedStyle(target).getPropertyValue('color');
var spinner = new Spinner(opts).spin(target);
});
See this updated JSFiddle.
请参阅此更新的 JSFiddle。
回答by Pim Verlangen
I'm not entirely sure, but if I'm correct, a percentage set in CSS is calculated from the window, not from an element within that window. Therefore, although I think the top/left is not being calculated from within the parent, but from the window.
我不完全确定，但如果我是对的，CSS 中设置的百分比是根据窗口计算的，而不是根据该窗口中的元素计算的。因此，虽然我认为顶部/左侧不是从父级内部计算的，而是从窗口计算的。
Furthermore, the documentation in-line says:
此外，在线文档说：
Left position relative to parent in px
Left position relative to parent in px
Read the last 2 characters: pixels, not percentage.
读取最后 2 个字符：像素，而不是百分比。
How to fix it? Hardcoding is one possible way, but pretty static (set left to half of the content's width - the spinner's width, the top half of the.. you get the picture).
如何解决？硬编码是一种可能的方式，但非常静态（将左侧设置为内容宽度的一半 - 微调器的宽度，......的上半部分，您会得到图片）。
回答by Matias
The solution above didn't work for me. I had to add a new css class name inside the "className" option of the spinner options set up. eg:
上面的解决方案对我不起作用。我必须在微调选项设置的“className”选项中添加一个新的 css 类名。例如：
var opts = {...,
className: 'spinner myCustomClass',
....
}
Where i put the necessary styles for centering my spinner.
我把必要的样式放在我的微调器居中的地方。
