Clicking the 'add image' button on the left adds a div with 2 draggable and resizable <p> elements into a container. The first <p> is the Title (Titre) and the second <p> contains the content of the div.
Below is the code :
.centrer {
display: block;
margin: auto;
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
height : 768px;
width : 432px;
background-color : #000000;
}
/* Additional CSS styles */
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Display</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.css" rel="stylesheet" />
<!-- Additional HTML code -->
The issue lies in the positioning of the 'Titre' element which remains centered when you resize the white squares. I would like the title to remain at the top of the div (the white square) while keeping the content centered. This discrepancy becomes more apparent after resizing the white squares.