个人中心
gpt4 book ai didi

javascript - 如何修复可调整大小的 div 中标题和内容的垂直对齐？

转载 作者：太空宇宙 更新时间：2023-11-04 11:00:20 25 4
gpt4 key购买 nike

当我们点击左侧的“添加图像”按钮时，它会添加一个带有 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/

25 4 0
文章推荐： html - 有什么方法可以独立于高度增加盒子阴影的宽度吗？
文章推荐： Java Appium Android - 如何处理侧边栏或左侧面板？
文章推荐： python - 如何在 Python 中使用 html5lib 获取 body 元素的内容？
文章推荐： java - 即时应用程序在发布中无法运行(即时应用程序启动因未知原因失败(getInstantAppPreLaunchInfo 失败))
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com