jquery - 在另一个 div 中对齐一个 div（故障）

Question

你可以在这里找到 jsFiddle 演示

正如您可能在图片上看到的那样，我试图将一个圆圈（div，绿色）的中间对齐到另一个圆圈（div，灰色）。我计算了两个 div 的中心并使它们相等，但是绿色的小圆圈仍然不在中间。

错误在哪里？我就是找不到。

我用来对齐圆圈的jquery（o绿色圆圈在哪里，$(this)灰色圆圈在哪里：

$.fn.center = function(o) {
  var _X = parseInt(o.css('left')) + parseInt(o.width())/2 - parseInt($(this).width())/2;
  var _Y = parseInt(o.css('top')) + parseInt(o.height())/2 - parseInt($(this).height())/2;
  $(this).offset({ top: _Y, left: _X });
};

预先感谢您的任何帮助！

Answer 1

这可能对您更有效：HTML：

   <div id="range_sword"> 
    <div class="jk"></div>
   </div>

CSS：

.range_sword, body, div{
    padding:0px;
    margin:0px;
}

.jk{
    display: block;
    min-width: 20px;
    min-height: 20px;
    border-radius: 10px;
    background-color: green;
}

#range_sword{
    background-color: transparent;
    border-radius: 100px;
    position: absolute;
    border-style: dashed;
    border-color: transparent;
    border-width:2px;
    padding:15px;
}
#range_sword:hover{
    background-color:#cdcdcd;
    border-color: #adadad;
}

JS：

$("#range_sword").draggable();

jsfiddle：http: //jsfiddle.net/H8Tsc/2/

Answer 2

使用 jQuery UI 的position方法。它允许您相对于任何其他元素定位任何元素并抽象所有复杂性。（由ogc-nick提供）。

$.fn.center = function(o) {
    $(this).position({
      my: "center middle",
      at: "center middle",
      of: o
    });
};

Answer 3

到目前为止，最简单的方法是删除 JS，只使用 CSS 伪元素（IE7 及更低版本不支持）。

http://jsfiddle.net/rzGX9/

.small-circle { position: relative; width: 20px; height: 20px; border-radius: 20px; background: #f00; }
.small-circle:after { z-index: -1; content:""; position: absolute;  background: #00f; border-radius: 50px; width: 50px; height: 50px; left: 50%; top: 50%; margin: -25px 0 0 -25px; display: none;}
.small-circle:hover:after { display: block; }