Align środkowy div w innym div (usterki)

Question

You can find jsFiddle demo here

Jak zapewne zobaczyć na zdjęciu ja próbuje wyrównać środku okręgu (div, zielony) do innego okręgu (div, szary) . Obliczyłem środek obu elementów div i uczyniłem je równymi, ale małe zielone kółko nadal nie znajduje się pośrodku.

Gdzie jest błąd? Po prostu nie mogę tego znaleźć.

jQuery używam wyrównać koło (gdzie o jest zielone kółko i $(this) jest szary jeden:

$.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 }); 
}; 

Z góry dziękuję za wszelką pomoc position metoda

Answer 1

użyć jQuery UI! Pozwala na umieszczenie dowolnego elementu względem dowolnego innego elementu i usuwa wszystkie komplikacje. (Dzięki uprzejmości ogc-nick).

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

Answer 2

Najprostszą metodą byłoby zrzucenie JS i użycie pseudo elementów CSS (nieobsługiwanych w IE7 i poniżej).

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

To może działać lepiej dla Ciebie: 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/