2017-06-01 81 views
0

我在容器內部有一個表格div,我希望在頁面中垂直對齊它。我不能爲我的生活弄清楚如何。我嘗試過使用表格和其他類型的柔性盒,但是我無法繞開它。如何在引導程序中垂直對齊表格4

這裏是我的代碼

<!DOCTYPE html> 

<html lang="en"> 

    <head> 

    <meta charset="utf-8"> 

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 

    <meta http-equiv="x-ua-compatible" content="ie-edge"> 

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> 
    <link rel="stylesheet" href="login.css" type="text/css"> 


    </head> 

    <body> 

    <div class="container"> 
     <div class="alert alert-warning alert dismissable fade show" role="alert"> 
      <button type="button" class="close" data-dismiss="alert" aria-label="close"><span aria-hidden="true">&times;</span></button> 
      <strong>Note:</strong> This feature is not working yet. Don't try to log in! 
     </div> 
     <form class="form-signin col-6 align-self-center"> 
      <h1 class="text-center">Sign In!</h1> 
      <p> 
       <label class="sr-only">Email Address</label> 
       <input type="emai" placeholder="Email Address" class="form-control" required autofocus> 
      </p> 
      <p> 
       <label class="sr-only">Password</label> 
       <input type="password" placeholder="Password" class="form-control" required autofocus> 
      </p> 

      <p class="checkbox"><label><input type="checkbox"> Remember me</label></p> 

      <button type="submit" class="btn btn-primary btn-block ">Sign in</button> 
     </form> 

    </div> 


    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script> 

    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script> 

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> 

    </body> 

</html> 

And here is the CSS 

    html, body { 

    height: 100%; 

} 

.container { 

    max-width: 400px; 
    height: 100%; 
    min-height: 100%; 


} 

.form-signin { 

    vertical-align: middle; 
} 

.box { 

    border: 1px red dotted; 
} 
+0

檢查小提琴https://jsfiddle.net/gkzhtknv/ – Shiladitya

回答

0

添加height: 100%的div元素不會延伸到整個屏幕。你可以通過添加一些邊框到你的div來檢查。 因此,將.container課程中的高度值更改爲100vh即可解決您的問題。

+0

非常感謝您,先生! – Owen