如何在可调整大小的div中固定标题和内容的垂直对齐？
[英]How to fix vertical alignment of title and content inside resizable div?
问题描述
当我们点击左侧的“添加图像”按钮时，它将添加一个具有2个<p>可拖动并可调整大小的div到一个容器中。 有一个<p>是标题（标题），而另一个<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的顶部（白色方块），但内容保持在div的中间。 调整白色正方形的大小后，这非常明显。
1 个解决方案
解决方案1
1 已采纳 2015-12-18 15:42:04
我知道您只需要将标题贴在正方形的顶部即可。 您可以通过将其添加到centerTitre类中来实现：
position: absolute;
top: 0;
left: 0;
right: 0;
告诉我那是否是你想要的。
如何在可调整大小和可滚动的div内的某个地方放置标签？
[英]How to keep a label in one place inside a resizable and scrollable div?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.