將頁面的中心登錄框以頁腳作爲底部響應地

在過去幾天嘗試使登錄框完全位於頁面中心的嘗試中，我感到沮喪。我希望它能夠響應設備大小，所以我使用Bootstrap。不過，對於我來說，我已經將它集中在頂部的頁面上，但我還需要將它移到整個頁面的中心位置。將頁面的中心登錄框以頁腳作爲底部響應地

此外，我有一個腳下，下面。

這裏是我有什麼

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="login.aspx.vb" Inherits="login" %> 

<!DOCTYPE html> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
    <title></title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link href="Content/bootstrap.min.css" rel="stylesheet" /> 
    <script src="Scripts/jquery-1.9.1.min.js"></script> 
    <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet"> 

    <script src="Scripts/bootstrap.min.js"></script> 
    <style type="text/css"> 
     body, html { 
      background: url(../images/bgmain.png) 100% no-repeat fixed; 
      font-family: 'Oxygen', sans-serif; 
      background-size: cover; 
     } 


     .main { 
      vertical-align: middle; 
     } 

     hr { 
      width: 10%; 
      color: #fff; 
     } 

     .form-group { 
      margin-bottom: 15px; 
     } 

     label { 
      margin-bottom: 15px; 
     } 

     input, 
     input::-webkit-input-placeholder { 
      font-size: 11px; 
      padding-top: 3px; 
     } 

     .main-login { 
      background-color: #fff; 
      /* shadows and rounded borders */ 
      -moz-border-radius: 2px; 
      -webkit-border-radius: 2px; 
      border-radius: 2px; 
      -moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3); 
      -webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3); 
      box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3); 
     } 

     h1 { 
      font-family: 'Montserrat', sans-serif; 
     } 

     .main-center { 
      margin-top: 50px; 
      margin: 0 auto; 
      max-width: 400px; 
      padding: 40px 40px; 
     } 

     .login-button { 
      margin-top: 5px; 
     } 

     .login-register { 
      font-size: 11px; 
      text-align: center; 
     } 

     #footer { 
      position: fixed; 
      bottom: 0; 
      padding: 5px; 
      align-content: center; 
      width: 100%; 
     } 

     .auto-style1 { 
      width: 88px; 
      height: 32px; 
     } 
    </style> 

</head> 
<body> 
    <form id="form1" runat="server"> 


     <div class="container"> 
      <div class="row main"> 
       <div class="panel-title text-center"> 
        <h1 class="title">Title</h1> 
        <hr /> 
       </div> 
      </div> 
      <div class="main-login main-center"> 
       <div class="form-group"> 
        <label for="username" class="cols-sm-2 control-label">User</label> 
        <div class="cols-sm-10"> 
         <div class="input-group"> 
          <span class="input-group-addon"><i class="fa fa-user fa" aria-hidden="true"></i></span> 
          <asp:TextBox ID="tbUser" runat="server" class="form-control" name="user" placeholder="Enter your password"></asp:TextBox> 
         </div> 
        </div> 
       </div> 

       <div class="form-group"> 
        <label for="password" class="cols-sm-2 control-label">Password</label> 
        <div class="cols-sm-10"> 
         <div class="input-group"> 
          <span class="input-group-addon"><i class="fa fa-lock fa-lg" aria-hidden="true"></i></span> 
          <asp:TextBox ID="txtPass" runat="server" class="form-control" placeholder="Enter your password" name="password"></asp:TextBox> 

         </div> 
        </div> 
       </div> 

       <div class="form-group "> 

        <asp:Button ID="Button2" runat="server" class="btn btn-primary btn-lg btn-block login-button" Text="Login" /> 
       </div> 
       <div class="login-register"> 
        <a href="create_account.php">Create account</a> or <a href="reset_password.php">reset password</a> 
        <asp:Label ID="lblerror1" runat="server" Text="Label"></asp:Label> 
       </div> 

      </div> 
      </div> 

     </div> 
     <div id="footer" class="login-register"> 
      <img alt="" class="auto-style1" src="images/logo.png" /><br /> 
      Copyright © 2016. All rights reserved. Privacy Policy</div> 
    </form> 
</body> 
</html>

來源

2016-11-17 SummerDays

這是您要做的嗎？ http://codepen.io/anon/pen/zoojEK –

是的，這是正確的！謝謝！ – SummerDays

更改.main-center類以下內容：

.main-center { 
    margin: 0 auto; 
    max-width: 400px; 
    padding: 40px 40px; 
    position:absolute; 
    left:0; 
    right:0; 
    top: 50%; 
    transform: translateY(-50%); 
}

這也將修復頁腳問題。
工作示例：https://jsfiddle.net/ze8m1nhq/

來源

2016-11-17 22:02:36

是的！非常感謝。 – SummerDays

將頁面的中心登錄框以頁腳作爲底部響應地

回答

相關問題