Question

I wanted to ask if it’s possible to make a circle with pivot in center in CSS because I;m making a resizable circle and when I make it normally than it doesn’t working properly. I’m using jQuery to make the resize smooth but the pivot of the circle isn’t in the middle but instead it’s on the top. So when I call the resize function the circle resizes downwards instead of normally.

Answer 1

To keep the circle in it’s place you need to set the position of the circle (div actually) to absolute and set the left and top of it by yourself. on every resize that you do you need to reset the left and top.

to keep the circle in center of something you can do this:

width:100px;
height:100px; 
left:50%;
top:50%;
margin-left:-50px;
margin-top:-50px;

amount of the with and height are depend on your design but margins should allways be half of the size of the div (navigate)

For resizing the circle I used a range input. and did this jQuery code:

$('input[type="range"]').change(function(){
    $('#c')
        .width($(this).val())
        .height($(this).val())
        .css('border-radius', $(this).val()/2)
        .css('margin-left', $(this).val()/-2)
        .css('margin-top', $(this).val()/-2);
});

You can clean this code up but it works! look at the example:

http://jsfiddle.net/mohsen/4PHMj/

Update:

Here is more clean code: http://jsfiddle.net/mohsen/4PHMj/7/