Question

HTML看起来像这样，我试图垂直对齐中间的所有标题元素。除了时钟div之外，一切正常。

$(function(){
			startTime();
			positionDiv();
			$( "#innerDiv" ).draggable({ containment: "parent" });
		});

		$(document).keyup(function(e) {
		  if (e.keyCode == 27) { 
		  	$("#innerDiv").hide();
		  }else if(e.keyCode == 13) {
		  	$("#innerDiv").show();
		  }
		});

		function startTime() {
		    var today=new Date();
		    var h=today.getHours();
		    var m=today.getMinutes();
		    var s=today.getSeconds();
		    m = checkTime(m);
		    s = checkTime(s);
		    document.getElementById('clock').innerHTML = h+":"+m+":"+s;
		    var t = setTimeout(function(){startTime()},500);
		}

		function checkTime(i) {
		    if (i<10) {i = "0" + i}; 
		    return i;
		}

		function positionDiv () {
			console.log('Ready to position inner div');
			var innerDiv = document.getElementById("innerDiv");
			if (document.getElementById('centerCheckbox').checked) {
				console.log('Setting the position to center');
				innerDiv.className = "box";
				$('#boxText').text("Center")
			} else if(document.getElementById('lrCheckbox').checked) {
				console.log('Setting the position to lower right corner');
				innerDiv.className = "lowerRightCorner";
				$('#boxText').text("Lower Right Corner")
			}
		}

html, body {
			height: 100%;
		}
		body {
			margin: 0;
			padding: 0;
			color: #000;
			background-color: #fff;
		}
		html {
			overflow-y: hidden;
		}
		.head, .foot, .middle {
			position: absolute;
			width: 100%;
			left: 0;
		}
		.middle {
			top: 100px;
			bottom: 50px;
			height: 400px;
			background-color: #ffd;
		}
		.head {
			height: 100px;
			top: 0;
			background-color: #000;
			color: #fff;
			display: table;
		}
		.foot {
			height: 50px;
			bottom: 0;
			background-color: #000;
		}
		.middle p {
			border: 1px solid #00f;
			margin: 0;

		}

		.box {
			position:fixed;
		    top: 50%;
		    left: 50%;
		    width:30em;
		    height:18em;
		    margin-top: -9em; 
		    margin-left: -15em;
		    border: 2px solid #ccc;
		    background-color: #f3f3f3;
		}

		.lowerRightCorner {
		    position: fixed;
		    bottom: 50px;
		    right: 0;
		    width:30em;
		    height:18em;
		    border: 2px solid #ccc;
		    background-color: #f3f3f3;
		  }

		#clock {
			float: right;
		}

		.position {
			float: left;
		}

		.helpText {
			margin-left: 40%;
		}

		.container {
			display: table-cell;
			vertical-align: middle;
		}

<!DOCTYPE html>
<html>
<head>
	<title>Vertica Web</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
	<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css" />
	<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
	<script>
		
	</script>

</head>
<style type="text/css">
		

</style>
<body>
	<div class="head">
	<div class="container">
		<div class="position">
			<span>Position: </span>
			<input type="radio" name="position" value="center" id="centerCheckbox" onclick="positionDiv()" checked>Center
			<input type="radio" name="position" value="lowerRight" id="lrCheckbox" onclick="positionDiv()" >Lower Right
		</div>
		<div class="helpText">Press Esc key to hide the window. Enter to show it again.</div>
		<div id="clock"></div>
	</div>
	</div>
	<div class="middle">
		<div id="innerDiv">
			<span id="boxText"></span>
		</div>
	</div>
	<div class="foot">footer</div>
</body>
</html>

垂直对齐div行中的元素

0 个答案: