合わせミドル別のdiv（グリッチ）でのdiv

Question

You can find jsFiddle demo here

あなたはおそらく別のサークルに私が真ん中に円を揃えるしようとしている画像（DIV、緑）に見るように（DIV、グレー） 。私は両方のdivの中心を計算し、それらを等しくしましたが、小さな緑色の円はまだ中間にありません。

どこが間違いですか？私はそれを見つけることができません。

私はoが緑色の円で、$(this)は灰色の一つです円（整列するために使用しjqueryの：

$.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

使用のjQuery UIのposition方法を！それによって、他の要素との相対的な位置に任意の要素を配置し、すべての合併症を抽象化することができます（ogc-nick）。

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

Answer 2

最も簡単な方法は、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; } 

Answer 3

これがあなたのために良い仕事かもしれません： 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/