title: align input in the middle
body: <p>My input field for name and password won't align in the middle, can someone help me?
  I've added the relevant HTML and CSS, hopefully you can figure out all the code :p.
  ....................................................................................</p>
  
  <p> </p>
  
  <pre><code>        &lt;div class="login"&gt;
              &lt;form action="&lt;?php echo $_SERVER['PHP_SELF']; ?&gt;" method="post" name="login_form"&gt;                      
                  &lt;div class="loginfield"&gt;&lt;input type="text" name="email" placeholder="Email" /&gt;&lt;/div&gt;
                  &lt;div class="loginfield"&gt;&lt;input type="password" name="password" id="password" placeholder="Password" /&gt;&lt;/div&gt;
                  &lt;input type="submit" id="loginbutton" name="loginbutton" value="Login" data-role=""  data-theme="" /&gt; 
              &lt;/form&gt;
              &lt;p&gt;Not a member? &lt;a href="register.php"&gt;Sign up&lt;/a&gt; now!&lt;/p&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.login input[type=password]{
      background: url(../images/password.png) 6px 4px no-repeat, linear-gradient(to bottom, #f7f7f8 0%,#ffffff 100%);
      background-size: 30px 30px;
      border-radius: 3px;
      border: 1px solid #fff;
      box-shadow: 0 1px 2px rgba(0,0,0,0.2) inset, 0 -1px 0 rgba(0,0,0,0.05) inset;
      transition: all 0.2s linear;
      font-size: 16px;
      color: #222222;
      position: relative;
      padding-left: 42px;
      float:left;
      margin-bottom: 10px;
      margin-top: 10px;
      height: 36px;
      width: 200px;
          @include breakpoint($tablet){
              width:300px;
              }
          @include breakpoint($desktopsmall){
              width:400px;
              }
  
      &amp;::-webkit-input-placeholder {
         color: #999999;
      }
  
      &amp;:-moz-placeholder {
         color: #999999;
      }
  
      &amp;:focus{
          box-shadow: 0 1px 0 #2392F3 inset, 0 -1px 0 #2392F3 inset, 1px 0 0 #2392F3 inset, -1px 0 0 #2392F3 inset, 0 0 4px rgba(35,146,243,0.5);
          outline: none;
          background: url(../img/keyIcon.png) 12px 11px no-repeat, #FFF;
      }
  }
  
  .login input[type=text]{
      background: url(../images/user.png) 6px 4px no-repeat, linear-gradient(to bottom, #f7f7f8 0%,#ffffff 100%);
      background-size: 30px 30px;
      border-radius: 3px;
      border: 1px solid #fff;
      box-shadow: 0 1px 2px rgba(0,0,0,0.2) inset, 0 -1px 0 rgba(0,0,0,0.05) inset;
      transition: all 0.2s linear;
      font-size: 16px;
      color: #222222;
      position: relative;
      height: 36px;
      width: 200px;
      padding-left: 42px;
      float:left;
      margin-bottom: 10px;
      margin-top: 10px;
          @include breakpoint($tablet){
              width:300px;
              }
          @include breakpoint($desktopsmall){
              width:400px;
              }
      &amp;::-webkit-input-placeholder {
         color: #999999;
      }
  
      &amp;:-moz-placeholder {
         color: #999999;
      }
  
      &amp;:focus{
          box-shadow: 0 1px 0 #2392F3 inset, 0 -1px 0 #2392F3 inset, 1px 0 0 #2392F3 inset, -1px 0 0 #2392F3 inset, 0 0 4px rgba(35,146,243,0.5);
          outline: none;
          background: url(../img/keyIcon.png) 12px 11px no-repeat, #FFF;
      }
  }
  </code></pre>