How can I center my form? - HTML and CSS - html

Question

I have a site here: http://americanbitcoinacademy.com/user-login/
As you can see the form is not yet centered.
The "username", "password", "remember me" are centered which must be text-aligned left.
I want to center the form and then text align left the username, password and the remember me label..using inspect element tool how can I do that?
Here's my CSS:
#import url(https://fonts.googleapis.com/css?family=Roboto:300);
.login-page {
width: 360px;
padding: 8% 0 0;
margin: auto;
}
.form {
position: relative;
z-index: 1;
background: #FFFFFF;
max-width: 360px;
margin: 0 auto 100px;
padding: 45px;
text-align: center;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}
.form input {
font-family: "Roboto", sans-serif;
outline: 0;
background: #f2f2f2;
width: 100%;
border: 0;
margin: 0 0 15px;
padding: 15px;
box-sizing: border-box;
font-size: 14px;
}
.form button {
font-family: "Roboto", sans-serif;
text-transform: uppercase;
outline: 0;
background: #dd374d;
width: 100%;
border: 0;
padding: 15px;
color: #FFFFFF;
font-size: 14px;
-webkit-transition: all 0.3 ease;
transition: all 0.3 ease;
cursor: pointer;
}
.form button:hover,.form button:active,.form button:focus {
background: #43A047;
}
.form .message {
margin: 15px 0 0;
color: #b3b3b3;
font-size: 12px;
}
.form .message a {
color: #4CAF50;
text-decoration: none;
}
.form .register-form {
display: none;
}
body {
background: #ecf0f1; /* fallback for old browsers */
font-family: "Roboto", sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.page-heading{ display: none; }
Please help!

Answer 1

You can remove
text-align: center;
from your form element.

Answer 2

for text left in labels..
.form label{width:100%;text-align:left;}
And if you change the <div id="content" class="col-md-9" role="main"> to <div id="content" class="col-md-12" role="main"> the form will be centered.
Cheers!

Answer 3

remove text-align:center form .form class
.form {
position: relative;
z-index: 1;
background: #FFFFFF;
max-width: 360px;
margin: 0 auto 100px;
padding: 45px;
text-align: center;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}
and also remove col-md-9 class form the div having content as ID
<div id="content" class="col-md-9" role="main">

Answer 4

Remove text-align: center; from this class -
.form {
position: relative;
z-index: 1;
background: #FFFFFF;
max-width: 360px;
margin: 0 auto 100px;
padding: 45px;
text-align: center;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}
And add this CSS to the remember me checkbox width: auto;
Avoid using element level CSS specificity such as: .form input always use classes.
Read more on CSS specificity:
MDN: https://developer.mozilla.org/en/docs/Web/CSS/Specificity
And a specificity calculator: https://specificity.keegan.st/

Answer 5

Remove the text-align:center from class form and change the class ub div from col-md-9 to col-md-12
<div id="content" role="main" class="col-md-12">
....
</div>
Your Updated CSS would be
.form {
position: relative;
z-index: 1;
/* text-align:center; Remove this line */
background: #FFFFFF;
max-width: 360px;
margin: 0 auto 100px;
padding: 45px;
text-align: left;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}

Answer 6

Change no. 1-
<div id="content" class="col-md-9" role="main"></div> to
<div id="content" class="col-md-12" role="main"></div>
Change no. 2-
.form {
position: relative;
z-index: 1;
background: #FFFFFF;
max-width: 360px;
margin: 0 auto 100px;
padding: 45px;
text-align: center;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
} to
.form {
position: relative;
z-index: 1;
background: #FFFFFF;
max-width: 360px;
margin: 0 auto 100px;
padding: 45px;
text-align: left;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}
Change no. 3- Add the following Css-
.login-remember label{ width: 100%;}
.form .login-remember input{width: auto;}

Answer 7

In fact the form itself is centered inside its container <article class="single-page-content">. You simply need to give that article, or actually its parent element (i.e. the div with id=content) full width.
For left alignment inside the form just change text-align: center to left inside the CSS rule for .form
.login-page {
width: 360px;
padding: 8% 0 0;
margin: auto;
}
.form {
position: relative;
z-index: 1;
background: #FFFFFF;
max-width: 360px;
margin: 0 auto 100px;
padding: 45px;
text-align: left;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}
.form input {
font-family: "Roboto", sans-serif;
outline: 0;
background: #f2f2f2;
width: 100%;
border: 0;
margin: 0 0 15px;
padding: 15px;
box-sizing: border-box;
font-size: 14px;
}
.form button {
font-family: "Roboto", sans-serif;
text-transform: uppercase;
outline: 0;
background: #dd374d;
width: 100%;
border: 0;
padding: 15px;
color: #FFFFFF;
font-size: 14px;
-webkit-transition: all 0.3 ease;
transition: all 0.3 ease;
cursor: pointer;
}
.form button:hover,.form button:active,.form button:focus {
background: #43A047;
}
.form .message {
margin: 15px 0 0;
color: #b3b3b3;
font-size: 12px;
}
.form .message a {
color: #4CAF50;
text-decoration: none;
}
.form .register-form {
display: none;
}
body {
background: #ecf0f1; /* fallback for old browsers */
font-family: "Roboto", sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.page-heading{ display: none; }
<div id="body" >
<div class="container">
<div class="content-pad-3x">
<div class="row">
<div id="content" class="col-md-9" role="main">
<article class="single-page-content">
<div class="login-page">
<div class="form">
<form class="login-form">
<form name="loginform" id="loginform" action="http://americanbitcoinacademy.com/wp-login.php" method="post">
<p class="login-username">
<label for="user_login">Username:</label>
<input type="text" name="log" id="user_login" class="input" value="" size="20" />
</p>
<p class="login-password">
<label for="user_pass">Password:</label>
<input type="password" name="pwd" id="user_pass" class="input" value="" size="20" />
</p>
<p class="login-remember"><label><input name="rememberme" type="checkbox" id="rememberme" value="forever" /> Remember Me</label></p>
<p class="login-submit">
<input type="submit" name="wp-submit" id="wp-submit" class="button button-primary" value="Log In" />
<input type="hidden" name="redirect_to" value="" />
</p>
</form><br />
Click here to become a full member…<br />
<br />
</form>
</div>
</div>