html - 居中自己创建的 div 类响应

标签 html css bootstrap-4

我正试图将我的 <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;
}

它确实在我的屏幕中间,但并不是真正的响应式。我尝试使用论坛中编写的代码来响应地居中,但它对我没有用。

这就是现在的样子,在我使用了 K_LUN 写下的代码之后。它居中,但现在登录框乱七八糟。 Thats how it looks now, after I used the code K_LUN wrote down. It is centerd, but now the login box is messed up.

最佳答案

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/

相关文章:

html - 使用 bootstrap 3 在同一行上获取两个日期时间选择器?

css - 如何将网站拉伸(stretch)到分辨率屏幕

html - 使用 HTML/CSS 在图标悬停时显示文本?

css - 使用 nth-child 的 5 行色 block

css - 为什么在我已经将父级设置为 flex 时我必须告诉子级显示 flex?

reactjs - React 的 Bootstrap 与 Material UI?

Vue.js bootstrap-vue : How to add correctly a cancel button in my form

html - CSS <ul> - <li> 菜单 : <a> element width height setting

Jquery - 单击按钮将 html 加载到一个 div 中,但使另一个 div 不可见

html - 手机响应式网站