javascript - 在 resizable() 之后定位 DIV

Question

我正在使用 jQuery 的 resizable()。我想在调整大小后将图像居中到调整大小的 div。我正在使用 stop: function() 但没有成功。

这是我试过的。但它不会将 div 居中到调整大小的 div。调整大小时如何将 #smlD 居中到 #mainD？

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

编辑

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，您不必担心以 stop resizable() 为中心。

在这里查看您的代码 CodePen以调整大小为中心工作:

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