如何在引导程序中垂直对齐表格4

我在容器内部有一个表格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; 
}

来源

2017-06-01 Owen

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

添加height: 100%的div元素不会延伸到整个屏幕。你可以通过添加一些边框到你的div来检查。因此，将.container课程中的高度值更改为100vh即可解决您的问题。

来源

2017-06-02 02:14:27 btx

非常感谢您，先生！ – Owen

如何在引导程序中垂直对齐表格4

回答

相关问题