Fatal编程技术网
  • html/
  • Html 以响应方式将登录框置于页面中央，底部有一个页脚

Html 以响应方式将登录框置于页面中央，底部有一个页脚

html twitter-bootstrap css

Html 以响应方式将登录框置于页面中央，底部有一个页脚,html,twitter-bootstrap,css,Html,Twitter Bootstrap,Css,在过去的几天里，我试图让我的登录框完全集中在页面的中心，这让我感到很沮丧。我希望它能对设备大小做出响应，所以我选择了Bootstrap。但对我来说，我让它在顶部的页面上居中，但我也需要向下移动，使它在整个页面上居中 我还有一个底部的页脚 这是我的 <%@ Page Language="vb" AutoEventWireup="false" CodeBehind="login.aspx.vb" Inherits="login" %> <!DOCTYPE html>

在过去的几天里，我试图让我的登录框完全集中在页面的中心，这让我感到很沮丧。我希望它能对设备大小做出响应，所以我选择了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>


正文，html{
背景：url（../images/bgmain.png）100%无重复固定；
字体系列：“氧气”，无衬线；
背景尺寸：封面；
}
梅因先生{
垂直对齐：中间对齐；
}
人力资源{
宽度：10%；
颜色：#fff；
}
.表格组{
边缘底部：15px；
}
标签{
边缘底部：15px；
}
输入，
输入：：-webkit输入占位符{
字体大小：11px；
垫面：3件；
}
.主登录名{
背景色：#fff；
/*阴影和圆形边框*/
-moz边界半径：2px；
-webkit边界半径：2px；
边界半径：2px；
-moz盒阴影：0px 2px 2px rgba（0,0,0,0.3）；
-webkit盒阴影：0px 2px 2px rgba（0,0,0,0.3）；
盒影：0px2px2pRGBA（0,0,0,0.3）；
}
h1{
字体系列：“蒙特塞拉特”，无衬线；
}
.主中心{
边缘顶部：50px；
保证金：0自动；
最大宽度：400px；
填充：40px 40px；
}
.登录按钮{
边缘顶部：5px；
}
.登入登记册{
字体大小：11px；
文本对齐：居中；
}
#页脚{
位置：固定；
底部：0；
填充物：5px；
对齐内容：居中对齐；
宽度：100%；
}
.auto-style1{
宽度：88px；
高度：32px；
}
标题


使用者
或


版权所有©2016。版权所有。隐私政策
使用以下内容更改
.main center
类：

.main-center {
   margin: 0 auto;
   max-width: 400px;
   padding: 40px 40px;
   position:absolute;
   left:0;
   right:0;
   top: 50%;
   transform: translateY(-50%);
}
这也将解决页脚问题。
工作示例：

这就是您想要做的吗？是的，没错！谢谢对非常感谢你。