gpt4 book ai didi

html - 如何使我的包装类在 HTML 中居中​​对齐

转载 作者:行者123 更新时间:2023-12-05 04:28:45 26 4
gpt4 key购买 nike

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Login</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<style>
body{
font: 14px sans-serif;

}
.wrapper{

padding: 20px;
margin-left: auto;
margin-right: auto;
vertical-align:middle;



}
</style>
</head>
<body>
<div class="wrapper" style="width: 500px; margin: 0 auto; background: #000; color: #fff;">
<h2>Login</h2>
<p>Please fill in your credentials to login.</p>

<?php
if(!empty($login_err)){
echo '<div class="alert alert-danger">' . $login_err . '</div>';
}
?>


<form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" method="post">
<div class="form-group">
<label>Username</label>
<input type="text" name="username" class="form-control <?php echo (!empty($username_err)) ? 'is-invalid' : ''; ?>" value="<?php echo $username; ?>">
<span class="invalid-feedback"><?php echo $username_err; ?></span>
</div>
<div class="form-group">
<label>Password</label>
<input type="password" name="password" class="form-control <?php echo (!empty($password_err)) ? 'is-invalid' : ''; ?>">
<span class="invalid-feedback"><?php echo $password_err; ?></span>
</div>
<div class="form-group">
<input type="submit" class="btn btn-primary" value="Login">
</div>
<p>Don't have an account? <a href="register.php">Sign up now</a>.</p>
</form>
</div>
</body>
</html>

我需要在页面中央显示我的包装器类。我已经研究并找到了一些方法,但这只是水平居中并且登录表单位于页面顶部。有人可以告诉我如何使用此代码在页面中央显示我的登录表单吗?我需要水平和垂直居中。

我也更改了 css 类。但没有任何变化。

我得到如下输出,

enter image description here

我需要如下所示,

enter image description here

最佳答案

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Login</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<style>
body{
font: 14px sans-serif;
height: 100%;
}
.wrapper{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
padding: 20px;
margin-left: auto;
margin-right: auto;
vertical-align: middle;
width: 500px;
background: #000;
color: #fff;


}
</style>
</head>
<body>
<div class="wrapper" style="">
<h2>Login</h2>
<p>Please fill in your credentials to login.</p>

<form action="" method="post">
<div class="form-group">
<label>Username</label>
<input type="text" name="username" class="form-control <?php echo (!empty($username_err)) ? 'is-invalid' : ''; ?>" value="<?php echo $username; ?>">
<span class="invalid-feedback"><?php echo $username_err; ?></span>
</div>
<div class="form-group">
<label>Password</label>
<input type="password" name="password" class="form-control">
<span class="invalid-feedback"></span>
</div>
<div class="form-group">
<input type="submit" class="btn btn-primary" value="Login">
</div>
<p>Don't have an account? <a href="register.php">Sign up now</a>.</p>
</form>
</div>
</body>
</html>

这应该可以做到。我还删除了内联 css。您以后应该避免这种情况。我从this中获取了主要信息回答。

关于html - 如何使我的包装类在 HTML 中居中​​对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/72535131/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com