当我们点击左侧的“添加图像”按钮时，它会添加一个带有 2 <p> 的 div。可拖动和调整大小到容器中。
有一个 <p>这是一个标题(Titre)和另一个<p>这是div的内容。
代码如下:
.centrer {
display: block;
margin: auto;
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
height : 768px;
width : 432px;
background-color : #000000;
}
.menu {
border:1px solid black;
padding-left:15px;
padding-right:15px;
padding-top:2px;
padding-bottom:2px;
float:left;
text-align : center;
}
h3, li, ul{
text-align : left;
}
.encadrer {
border: 1px solid white;
position:absolute !important;
}
.centrerTitre{
color : white;
margin : auto;
text-align : center;
padding-top:10px;
padding-bottom:10px;
padding-left:10px;
padding-right:10px;
}
.centrerPara{
font-size: 16;
color : white;
margin : auto;
text-align : center;
padding-top:10px;
padding-bottom:10px;
padding-left:10px;
padding-right:10px;
}
.inner {
display: inline-block;
vertical-align: middle;
text-align:center;
width:100%;
}
.encadrer:before {
content: "";
display: inline-block;
vertical-align: middle;
height: 100%;
}
/*----- Resizable ------*/
.ui-resizable { position: relative;}
.ui-resizable-handle { position: absolute;font-size: 0.1px;z-index: 99999; display: block;}
.ui-resizable-disabled .ui-resizable-handle, .ui-resizable-autohide .ui-resizable-handle { display: none; }
.ui-resizable-n { cursor: n-resize; height: 7px; width: 100%; top: -5px; left: 0px; }
.ui-resizable-s { cursor: s-resize; height: 7px; width: 100%; bottom: -5px; left: 0px; }
.ui-resizable-e { cursor: e-resize; width: 7px; right: -5px; top: 0px; height: 100%; }
.ui-resizable-w { cursor: w-resize; width: 7px; left: -5px; top: 0px; height: 100%; }
.ui-resizable-nw { cursor: nw-resize; height: 7px; width: 7px; top: -5px; left: -5px; }
.ui-resizable-se { cursor: se-resize; height: 7px; width: 7px; right: -5px; bottom: -5px; }
.ui-resizable-ne { cursor: ne-resize; height: 7px; width: 7px; top: -5px; right: -5px; }
.ui-resizable-sw { cursor: sw-resize; height: 7px; width: 7px; left: -5px; bottom: -5px; }
/*----------------------*/<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Affichage</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" />
<body>
<div id="menu" class="menu">
<h3>Taille de l'écran</h3>
<select id='selector'>
<option value="1920x1080">1920x1080</option>
</select>
</br></br>
<table>
<tr>
<td><input type="radio" id="portrait" name="orientation" value="portrait" checked="checked">Portrait</td>
<td><input type="radio" id="paysage" name="orientation" value="paysage">Paysage</td>
</tr>
</table>
</br>
<h3>Ajouter des éléments</h3>
<ul>
<li><a id="ajoutImage" href="#" onclick="return false;">Image</a></li>
</ul>
</div>
<div id="bg"></div>
<script type="text/javascript">
var bg = document.getElementById('bg');
bg.className = "centrer";
var ajoutImg = document.getElementById('ajoutImage');
var initDiagonal;
var initFontSize;
var rad = document.getElementsByName('orientation');
for(var i = 0; i < rad.length; i++) {
rad[i].onclick = tailleEcran;
}
document.getElementById("selector").addEventListener("change", tailleEcran, false);
ajoutImg.onclick = function() {
//var name = prompt("Texte de l'image :");
var container = document.createElement("div");
container.className = 'encadrer';
var inner = document.createElement("div");
inner.className = 'inner';
var titre = document.createElement("p");
var para = document.createElement("p");
titre.textContent = "Titre";
titre.className = 'centrerTitre';
inner.appendChild(titre);
para.textContent = prompt("Texte de l'image :");;
para.className = 'centrerPara';
inner.appendChild(para);
container.appendChild(inner);
//var container = $('<div class="encadrer"><div class="inner"><p class="centrerTitre">Titre</p><p class="centrerPara">' + name + '</p></div></div>');
bg.appendChild(container);
$(container)
.draggable({containment:"parent"})
.resizable({
containment:"parent",
handles: "all"
});
};
function tailleEcran() {
switch(document.getElementById("selector").value){
case '1920x1080' :
if(document.getElementById("portrait").checked == true){
bg.style.height = '768px';
bg.style.width = '432px';
}else{
bg.style.height = '432px';
bg.style.width = '768px';
}
break;
}
}
</script>
</body>
</html>当您调整大小时，您可以看到“Titre”停留在页面中间。我希望此标题保留在 div 的顶部(白色方 block )，但内容保留在中间。调整白色方 block 的大小后，这一点非常明显。
最佳答案
我知道你只需要将标题贴在你的广场的顶部。 您可以通过将其添加到 centerTitre 类来实现:
position: absolute;
top: 0;
left: 0;
right: 0;
如果你想要，请告诉我。
关于javascript - 如何修复可调整大小的 div 中标题和内容的垂直对齐？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34358381/