HTML页面Inner Body区域表单与信息框布局优化需求

Got it, let's fix your layout requirements step by step. Here's the adjusted code that meets all three layout goals while keeping your existing code structure intact:

Modified CSS Code #

body{ font-family: Verdana, Geneva, Tahoma, sans-serif; }
.content { width: 1400px; margin: auto; padding: 10px; }
/* inner body styling */
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
div.inner-body { 
  background-image: url(image/blueimage.png); 
  margin-bottom: 20px; 
  margin-top: 20px; 
  height: 900px; 
  /* Switch to flexbox for better horizontal alignment and centering */
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px; /* Adds clean spacing between form and info box */
}
form { 
  font-family: Verdana, Geneva, Tahoma, sans-serif; 
  border-radius: 40px; 
  width: 525px; 
  height: 700px; 
  background-color: rgb(99, 198, 223); 
  box-shadow: 0px 15px 20px rgba(0,0,0,0.5);
  /* Remove disruptive top margin and reset spacing */
  margin: 0;
  padding: 20px 0; /* Maintain inner form spacing without shifting layout */
}
.signin { 
  font-size: 35px; 
  padding: 10px; 
  width: 530px ; 
  height: 500px; 
  background-color: rgb(173, 241, 241); 
  border-radius: 30px; 
  box-shadow: 0px 15px 20px rgba(0,0,0,0.5);
  /* Remove conflicting margin values */
  margin: 0;
  /* Align to form's vertical midline */
  align-self: center;
}
.signin-intro { color: black; }
.passlabel { white-space: pre; font-family: Verdana, Geneva, Tahoma, sans-serif; font-style: oblique; }
.stafflabel { white-space: pre; font-family: Verdana, Geneva, Tahoma, sans-serif; font-style: oblique; }
.field { width: 500px; font-size: 25px; font-style: oblique; }
.error { color: red; font-size: 15px; font-family: Verdana, Geneva, Tahoma, sans-serif; font-weight: bold; }
.error1 { color: red; font-size: 15px; font-family: Verdana, Geneva, Tahoma, sans-serif; }
.userlogo { width: 200px; border-radius: 100px; margin-top: -15px; }
.area { width: 280px; height: 30px; border-radius: 20px; font-size: 20px; padding: 5px; font-style: oblique; }
.btn { width: 400px; height: 40px; font-size: 30px; border-radius: 20px; background-color: rgb(54, 88, 238); cursor: pointer; }
.account-link { font-size: 20px; }
.checkbox { display: inline-flex; font-size: 20px; }
.remember { white-space: pre; }
form .pass-link a:hover, form .account-link a:hover{ text-decoration: underline; }
.pass-link { white-space: pre; }
.remember-me { width: 20px; height: 20px; }

Full HTML Code (No Changes Needed) #

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="signin.css">
<script src="signin.js"></script>
<title>Document</title>
</head>
<body>
<div class= "content">
<div class="inner-body">
<div class ="signin">
<h3><u>Staff Members Sign In</u></h3>
<p class="signin-intro"> This sign in form is meant for staff memebers only, if you are a student, please use this link <a href="studentaccount.html" title="Student Account">Student Account</a> </p>
</div>
<form method="GET" onsubmit=" return formSubmit() " action="#">
<div class="userimage">
<img class="userlogo" src="image/userlogo.png" alt="Picture- User Profile picture">
</div><br>
<div class="error" id= "errorMsg"></div><br>
<div class="error" id= "errorMsg1"></div>
<div class="field">
<label class="stafflabel"> Staff Name </label>
<input class="area" placeholder="staffmember or admin" onclick=" return userValidation()" onchange=" return userValidation()" id="staff" name="staff" type="text">
</div>
<br>
<div class="error" id= "errorMsg2"></div>
<div class="field">
<label class="passlabel"> Password </label>
<input class="area" placeholder="password" onclick=" return userValidation()" onchange=" return userValidation()" id="pass" name="pass" type="password">
</div><br>
<div class="checkbox">
<input type="checkbox" class="remember-me">
<label class="remember" for="remember-me">Remember me </label>
<a class="pass-link" href="#"> Forgot password? </a>
</div><br><br><br>
<div class="field">
<input class="btn" type="submit" value="Sign in">
</div>
<br>
<div class="account-link"> Didn't create an account yet? <a href="#">Create Account</a> </div>
</form>
</div>
</div>
</body>
</html>

Key Changes Explained: #

• Inner Body: Switched from display: grid to display: flex to simplify horizontal alignment. Added justify-content: center to center the entire form/info box set, align-items: center to keep them vertically centered within the inner-body, and gap for consistent spacing between elements.
• Form: Removed the margin-top that was pushing the form off-center, and added vertical padding to preserve inner spacing without disrupting layout.
• Info Box: Cleared conflicting margin values (like margin-top: -50px) and added align-self: center to ensure it aligns perfectly with the form's vertical midline.

内容的提问来源于stack exchange，提问作者Arcane Persona