I am faced with a challenge regarding an element inside a DIV. Here is the current setup...
<div id="parent">
<div id="child"></div>
</div>
Typically, in order to center the child within the parent while dynamically changing its size, I would implement the following solution...
$('#child').resizable({
resize:function(){
// This adjusts the left/top offset as the width increases
$('#child').css({
left:$('#parent').width()/2 - $('#child').width()/2,
top:$('#parent').height()/2 - $('#child').height()/2
})
}
});
The method described above works well, although when resizing the child element, it always starts from the same initial position rather than its existing offset.
Now, I am looking for a way to modify the child's left and top offset using similar calculations as before, but this time based on the precise offset and dimensions of the child itself, not relying on the parent's dimensions.