hizalayın orta bir grup oluşturabilirim (aksaklık) bir div

Question

You can find jsFiddle demo here

muhtemelen başka çemberin içine Ben ortada bir daire hizalamak için çalışıyor resim (div, yeşil) gördüğünüz gibi (div, gri) . Her iki divun merkezini hesapladım ve onları eşit yaptım, ama küçük yeşil daire hala ortada değil. hata nerede

mı? Onu bulamıyorum.

Ben o yeşil daire olduğu (daire hizalamak için kullanmak jquery ve $(this) gri biridir:

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

herhangi bir yardım için şimdiden teşekkür ederiz

Answer 1

Kullanım jQuery UI position yöntemi! Herhangi bir öğeyi diğer herhangi bir öğeye göre konumlandırmanıza ve tüm komplikasyonları özetlemenize izin verir. (ogc-nick izniyle)

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

Answer 2

arayla en kolay yöntem JS bırakın ve sadece BB sözde elemanları (değil aşağıda IE7'de desteklenen ve) kullanmak için olurdu.

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

Bu sizin için iyi çalışabilir: 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/