在另一个div（毛刺）中间对齐一个div

Question

You can find jsFiddle demo here

As you probably see on the picture I trying to align middle a circle (div, green) into another circle (div, grey). I calculated the center of both div and made them equal, but the little green circle is still not in the middle.

Where is the mistake? I just can't find it.

The jquery I use to align circle (where o is the green circle, and $(this) is the grey one:

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

Thank you in advance for any help!

Answer 1

Use jQuery UI's position method. It allows you to position any element relative to any other element and abstracts all of the complications. (Courtesy of ogc-nick ).

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

Answer 2

This might work better for you: 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 3

The easiest method by far would've been to drop the JS and just use CSS pseudo elements (not supported in IE7 and below).

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; }