我无法以登录页面为中心获取登录表单

时间：2018-12-28 11:11:51

标签： html css bootstrap-4

我希望登录表单位于登录页面的中心，并且我尝试使用align-items-center和justify-content-center（https://codepen.io/sanesanyo/pen/vveNqE），但最终还是从顶部开始。如果有人可以帮助我，我将非常高兴。花了很多时间，还没有找到解决办法。

非常感谢。

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta content='IE=Edge' http-equiv='X-UA-Compatible'>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

    <link href="https://fonts.googleapis.com/css?family=Nunito:200,300,400,700" rel="stylesheet">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="app.css">

    <title>Dein Immobilien Centre - Das Portal für Zwangsversteigerungen in Deutschland</title>
  </head>
  <body id="login" style="height:800px">
    <nav id="mainNavbar" class="navbar navbar-dark navbar-expand-xl pt-10 pb-0 fixed-top">
      <a href="index.html" class="navbar-brand"><img src="ImmoCenterDeinLogo.jpg" style="width: 240px; height: 50px" alt=""></a>
      <button class="navbar-toggler" data-toggle="collapse" data-target="#navLinks" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse justify-content-between" id="navLinks">
        <ul class="navbar-nav">
          <li class="nav-item">
            <a href="index.html" class="nav-link">HOME</a>
          </li>
          <li class="nav-item">
            <a href="#" class="nav-link">ÜBER UNS</a>
          </li>
          <li class="nav-item">
            <a href="#" class="nav-link">ANGEBOTE</a>
          </li>
          <li class="nav-item">
            <a href="katalog.html" class="nav-link">KATALOG</a>
          </li>
          <li class="nav-item">
            <a href="#" class="nav-link">KONTAKT</a>
          </li>
          <li class="nav-item">
            <a href="#" class="nav-link">IMPRESSUM</a>
          </li>
          <ul class="navbar-nav">
            <li class="nav-item">
              <a href="#" class="nav-link">Sign Up <i class="fas fa-user-plus"></i></a>
            </li>
            <li class="nav-item">
              <a href="login.html" class="nav-link">Login <i class="fas fa-user"></i></a>
            </li>
          </ul>
        </ul>
        <form class="form-inline my-2 my-lg-0">
            <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
        </form>
      </div>
    </nav>

    <section class="container-fluid px-0">
      <div class="row align-items-center justify-content-center">
        <div class="col-lg-6">
          <div id="headingGroup" class="text-white text-center mt-5" >
            <h2 class="display-2">"                                                "</h2>
            <h2 class="display-2">DEIN<span>/</span>IMMOBILIEN<span>/</span>CENTER</h2>
            <h2 class="display-3">Dein Neues Zuhause</h2>
          </div>
        </div>
      </div>
      <div class="row align-items-center justify-content-center">
        <div class="col-lg-6">
          <form>
            <div class="form-group">
              <label for="exampleInputEmail1">Email address</label>
              <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">

            </div>
            <div class="form-group">
              <label for="exampleInputPassword1">Password</label>
              <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
            </div>
            <div class="form-group form-check">
              <input type="checkbox" class="form-check-input" id="exampleCheck1">
              <label class="form-check-label" for="exampleCheck1">Check me out</label>
            </div>
            <button type="submit" class="btn btn-primary">Submit</button>
          </form>
      </div>
    </div>
    </section>


    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->



<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>

  </body>
</html>

2 个答案:

答案 0 :(得分：1)

添加height 100% 

<section class="container-fluid px-0" style="height: 100%;">
      <div class="row align-items-center justify-content-center" style="height: 100%;">

https://codepen.io/anon/pen/RELryp

答案 1 :(得分：0)

除了顶部和大小上的文本颜色外，我认为您无需在此处进行任何更改，您的代码对我来说还可以。

代码如下：

    <!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta content='IE=Edge' http-equiv='X-UA-Compatible'>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

    <link href="https://fonts.googleapis.com/css?family=Nunito:200,300,400,700" rel="stylesheet">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="app.css">

    <title>Dein Immobilien Centre - Das Portal für Zwangsversteigerungen in Deutschland</title>
  </head>
  <body id="login" style="height:800px">
    <nav id="mainNavbar" class="navbar navbar-dark navbar-expand-xl pt-10 pb-0 fixed-top">
      <a href="index.html" class="navbar-brand"><img src="ImmoCenterDeinLogo.jpg" style="width: 240px; height: 50px" alt=""></a>
      <button class="navbar-toggler" data-toggle="collapse" data-target="#navLinks" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse justify-content-between" id="navLinks">
        <ul class="navbar-nav">
          <li class="nav-item">
            <a href="index.html" class="nav-link">HOME</a>
          </li>
          <li class="nav-item">
            <a href="#" class="nav-link">ÜBER UNS</a>
          </li>
          <li class="nav-item">
            <a href="#" class="nav-link">ANGEBOTE</a>
          </li>
          <li class="nav-item">
            <a href="katalog.html" class="nav-link">KATALOG</a>
          </li>
          <li class="nav-item">
            <a href="#" class="nav-link">KONTAKT</a>
          </li>
          <li class="nav-item">
            <a href="#" class="nav-link">IMPRESSUM</a>
          </li>
          <ul class="navbar-nav">
            <li class="nav-item">
              <a href="#" class="nav-link">Sign Up <i class="fas fa-user-plus"></i></a>
            </li>
            <li class="nav-item">
              <a href="login.html" class="nav-link">Login <i class="fas fa-user"></i></a>
            </li>
          </ul>
        </ul>
        <form class="form-inline my-2 my-lg-0">
            <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
        </form>
      </div>
    </nav>

    <section class="container-fluid px-0" >
      <div class="row align-items-center justify-content-center">
        <div class="col-lg-6">
          <div id="headingGroup" class="text text-center mt-5" >
            <h2 class="display-5">"                                                "</h2>
            <h2 class="display-4">DEIN<span>/</span>IMMOBILIEN<span>/</span>CENTER</h2>
            <h2 class="display-4">Dein Neues Zuhause</h2>
          </div>
        </div>
      </div>
      <div class="row align-items-center justify-content-center">
        <div class="col-lg-6">
          <form>
            <div class="form-group">
              <label for="exampleInputEmail1">Email address</label>
              <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">

            </div>
            <div class="form-group">
              <label for="exampleInputPassword1">Password</label>
              <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
            </div>
            <div class="form-group form-check">
              <input type="checkbox" class="form-check-input" id="exampleCheck1">
              <label class="form-check-label" for="exampleCheck1">Check me out</label>
            </div>
            <button type="submit" class="btn btn-primary">Submit</button>
          </form>
      </div>
    </div>
    </section>


    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->



<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>

  </body>
</html>
相关问题
最新问题