[英]JQuery set an element at the middle of another
嗨,我有一些像这样的元素:
<div id="one">content</div>
<div id="two">content</div>
以及相应数量的元素(没有任何父元素,它们位于body标签之后),它们具有:
position: absolute;
并且具有这样的ID:
id="helper-one" refers to id="one"
现在,我想将第二组元素恰好放置在所引用元素的中间(垂直和水平),我该怎么做?
我试过了偏移量:
var one_offset = $("#one").offset();
$("#helper-one").offset({ top: one_offset.top, right: one_offset.right, left:one_offset.left, bottom: one_offset.bottom})
但是它仅将左上角和左下角的位置设置为辅助元素,而不是在元素的中心
jQuery.fn.center = function (obj) {
var loc = obj.offset();
this.css("top",(obj.outerHeight() - this.outerHeight()) / 2 + loc.top + 'px');
this.css("left",(obj.outerWidth() - this.outerWidth()) / 2 + loc.left+ 'px');
return this;
}
调用为$("#helper-one").center($("#one"));
ps:您甚至可以通过解析原始元素的id来跳过obj参数
jQuery.fn.center = function () {
var obj = $('#' + this.attr('id').split('-')[1]), loc = obj.offset();
this.css("top",(obj.outerHeight() - this.outerHeight()) / 2 + loc.top + 'px');
this.css("left",(obj.outerWidth() - this.outerWidth()) / 2 + loc.left+ 'px');
return this;
}
$(document).ready(function(){
$("#helper-one").center();
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.