html5 - Center login box to the page responsively with a footer at the bottom -
i getting frustrated in past few days of attempts trying make login box center on page. want responsive device size, went bootstrap. me though, have centering responsively on page @ top, need move down center on entire page.
also have footer goes underneath.
here have
<%@ 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 , 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 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 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. rights reserved. privacy policy</div> </form> </body> </html>
change .main-center class following:
.main-center { margin: 0 auto; max-width: 400px; padding: 40px 40px; position:absolute; left:0; right:0; top: 50%; transform: translatey(-50%); } this fix footer problem.
working example: https://jsfiddle.net/ze8m1nhq/
Comments
Post a Comment