我正试图将我的 <div class="loginfeld">
居中但我无法在保持响应的同时使其居中(在中间)。
<html>
<body>
<div class ="loginfeld">
<div class="container">
<div class="col-lg-4"></div>
<div class="col-lg-4">
<div class="jumbotron">
<center><h1>Hallo!</h1></center>
<br>
<form action="login.php" method="POST">
<div class="form-group">
<input type="text" class="form-control" name="benutzername"
placeholder="Benutzernamen eingeben">
</div>
<div class="form-group">
<input type="text" class="form-control" name="passwort"
placeholder="Passwort eingeben">
</div>
<button type="text" class="btn
btn-primary form-control" name ="login">Login</button>
<center><p><?php echo $hinweis; ?></p></center>
</form>
</div>
</div>
<div class="col-lg-4"></div>
</div>
</div>
</body>
</html>
在我的 css 样式文件中:
.loginfeld{
margin-top: 250px;
margin-left: 750px;
max-width: 1000px;
}
它确实在我的屏幕中间,但并不是真正的响应式。我尝试使用论坛中编写的代码来响应地居中,但它对我没有用。
最佳答案
Bootstrap 提供了足够多的类来实现您使用最小自定义 CSS 所需的功能。
我删除了您在容器开头和结尾处的附加 col-lg-4
;还添加了一个 row
div,因为您应该只在一行中包含 col-*
类。
之后,您只需将 justify-content-center
添加到行中以使元素居中,以及 align-items-center
以及自定义属性height: 100vh
因此该行使用视口(viewport)的整个高度。
.full-scrn {
height: 100vh;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<body>
<div class="container">
<div class="row justify-content-center align-items-center full-scrn">
<div class="col-10 col-md-8 col-lg-4">
<div class="jumbotron">
<center>
<h1>Hallo!</h1>
</center>
<br>
<form action="login.php" method="POST">
<div class="form-group">
<input type="text" class="form-control" name="benutzername" placeholder="Benutzernamen eingeben">
</div>
<div class="form-group">
<input type="text" class="form-control" name="passwort" placeholder="Passwort eingeben">
</div>
<button type="text" class="btn
btn-primary form-control" name="login">Login</button>
<center>
<p>
<?php echo $hinweis; ?>
</p>
</center>
</form>
</div>
</div>
</div>
</div>
</body>
关于html - 居中自己创建的 div 类响应,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55869164/