Позиционирование DIVs после изменения размера()

Question

Я использую jQuery's resizable(). Я хочу центрировать изображение с измененным размером div после его изменения размера. Я использую stop: function(), но не добился успеха.

Это то, что я пробовал. Но он не центрирует div для измененного размера div. Как изменить центр #smlD на #mainD при изменении размера?

$('#mainD').resizable({ 
       stop: function(){ 
       var gpa = ($('#mainD').width() - $('#smlD').width())/2; 
        $('#smlD').css({ left: gpa }); 
       } 
     }); 

EDIT

CSS:

.inW3{ 
    position:relative; 
    background-color: #000; 
    width: 100px; 
    height: 100px;  
    left:0; 
    right:0; 
    margin-left:auto; 
    margin-right:auto; 
} 

.innerWrp .inW1 .inW2{ 
    position: relative; 
} 

.outerWrp{ 
    position: absolute; 
} 

HTML:

<div class ="outerWrp"> 
    <div class ="innerWrp"> 
     <div class ="inW1"> 
     <div class ="inW2" id="mainD"> 
      <div class ="inW3" id ="smlD"> 
      </div> 
     </div> 
     </div> 
    </div> 
</div> 

Answer 1

Пусть CSS сделать для вас работу. С margin-left: auto и margin-right: auto вы не должны беспокоиться о центрировании на остановке resizable().

Проверьте свой код здесь CodePen работает с центрированием на изменение размера:

$('#mainD').resizable();