How can I center my form? - HTML and CSS

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

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 2

You can remove

text-align: center;

from your form element.

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 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 5

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 6

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 (ie 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 /> <a href="/order">Click here</a> to become a full member&#8230;<br /> <br /> </form> </div> </div> 

Answer 7

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!