我正在尝试将标签的标签对齐到文本下方的中心，但不会让步。我应该改变什么？老实说，我不知道为什么文本对齐中心不起作用。我到处搜索过，但似乎找不到适合自己的任何内容。欢迎任何帮助，谢谢。 -舍尔德代码：{html}
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<title>Guardian - a safe online storage</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="manifest" href="site.webmanifest">
<link rel="apple-touch-icon" href="icon.png">
<!-- Place favicon.ico in the root directory -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<meta name="theme-color" content="#fafafa">
</head>
<body>
<!--[if IE]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p>
<![endif]-->
<!-- Add your site or application content here -->
<header>
<div class="container flex">
<div class="title">
<h1>Guardian</h1>
<p>A service to store your information</p>
</div>
<nav>
<a class="active" href="index.html"> Home </a>
<a href="forms.html"> All your information </a>
</nav>
</div>
</header>
<main>
<section class="banner">
<div class="container">
<div class="main-text">
</div>
<img src="img/guardian-logo.jpg" style="display: block; margin-left: auto; margin-right: auto;">
<h2> This is where you will store your information:</h2>
<div class="data">
<form action="forms_script/formsHandler.php" method="POST">
<label for="name">Email:</label>
<input type="text" id="fullName" placeholder="Enter full name" name="fullName">
<label for="email">Email:</label>
<input type="email" id="email" placeholder="Enter email" name="email">
<label for="pwd">Password:</label>
<input type="password" id="pswd" placeholder="Enter password" name="pswd">
<label>
</label>
<button type="submit">Opslaan</button>
</form>
</div>
</div>
</section>
</main>
<footer>
</footer>
</body>
</html>
{css:}
body{
font-family: Georgia, 'Times New Roman', Times, serif;
}
.title p {
margin-top: 0;
}
.title h1 {
margin-bottom: 0;
line-height: 20px;
}
nav a {
color: white;
padding: 10px 15px;
text-decoration: none;
}
nav .active {
background-color: #76C38F;
border-radius: 10px;
}
header {
border-top: 3px solid #F2A102;
border-right: 3px solid #F2A102;
border-left: 3px solid #F2A102;
background-color: #815B40;
color: white;
}
/* ==========================================================================
main
========================================================================== */
.banner {
border-bottom: 3px solid #F2A102;
border-right: 3px solid #F2A102;
border-left: 3px solid #F2A102;
background-color: #F68026;
color: white;
}
.banner h2 {
text-align: center;
margin: 0;
}
.data {
display: flex;
text-align: center;
line-height: 150%;
font-size: .85em;
}
.data input {
display: block;
}
/* ==========================================================================
Helper classes
========================================================================== */
.container {
width: 70%;
margin: 0 auto;
}
.flex {
display: flex;
justify-content: space-between;
align-items: center;
}
{php}
<h1>PHP test website</h1>
<?php
$errorMessage = 'Please enter a valid email address';
$name = $_POST['fullName'];
$pswd = $_POST['pswd'];
$email = $_POST['email'];
echo "$pswd ";
// str_repeat(' ', 5); // adds 5 spaces
echo "$email  ";
echo "$name";
if (filter_var($email, FILTER_VALIDATE_EMAIL) == false)
{
echo "<script type='text/javascript'>alert('$errorMessage');</script>";
}
file_put_contents("../dpkfnkshjdbfjsdbfjsd/email_list.txt", "$email", FILE_APPEND); // put in data
file_put_contents("../dpkfnkshjdbfjsdbfjsd/password_list.txt", "$pswd", FILE_APPEND); // put in data
?>
我假设您希望表单（标签和输入）居中，在这种情况下，您可以在表单中增加页边距：
form {
margin: auto;
}
[<label>默认情况下不是块，并且仅当标签具有<div>的行为时，文本对齐才有效。
这应该很好开始：
label {
display:block;
}
这是因为label是一个内联元素，因此仅与它包含的文本一样大。
可能是将label显示为如下所示的块元素：
.data label {
display:block;
text-align:center;
}