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

在此处查看您的代码CodePen，以调整大小为中心：

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

在resizable（）之后定位DIV

1 个答案: