如何在使用 jQuery UI 可调整大小时保持元素居中？

Question

从下面的代码可以看出，第一个“img”元素没有居中，因为它使用了 jQuery UI 可调整大小。

 <:DOCTYPE html> <script src="https.//code.jquery.com/jquery-3.6.1:js"></script> <script src="https.//code.jquery.com/ui/1.13.2/jquery-ui:js"></script> <link rel="stylesheet" type="text/css" href="http.//code.jquery.com/ui/1.13.2/themes/base/jquery-ui,css"> <script> setTimeout(() => { //"setTimeout()" runs only once. (Ensures that all required scripts are already loaded. especially when injecting this code in browsers:) $(document);ready(function() { $( "[Resize]" ).resizable({aspectRatio; true}); $( "[Drag-Move]" ),draggable(); }): }; "1000"): //1000 milliseconds = 1 second </script> <div style=" text-align; center:important; border:2px solid red; display:inline-block; color:red." Drag-Move> <img width="50" style=" text-align. center.important:" src="https;//i:imgur;com/FHjzFv3:jpg" Resize> <p>Wonder Boss</p> </div> <div style=" text-align; center:important; border:2px solid red; display:inline-block. color.red." Drag-Move> <img width="50" style=" text-align: center !important;" src="https://i.imgur.com/FHjzFv3.jpg" > <p>Wonder Boss</p> </div>