對齊輸入中間

我的輸入字段名稱和密碼不會在中間對齊，有人可以幫我嗎？我已經添加了相關的HTML和CSS，希望你能弄清楚所有的代碼：p。 ................................................. ...................................對齊輸入中間

 <div class="login"> 
      <form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post" name="login_form">      
       <div class="loginfield"><input type="text" name="email" placeholder="Email" /></div> 
       <div class="loginfield"><input type="password" name="password" id="password" placeholder="Password" /></div> 
       <input type="submit" id="loginbutton" name="loginbutton" value="Login" data-role="" data-theme="" /> 
      </form> 
      <p>Not a member? <a href="register.php">Sign up</a> now!</p> 
     </div>

CSS

.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; 
      } 

    &::-webkit-input-placeholder { 
     color: #999999; 
    } 

    &:-moz-placeholder { 
     color: #999999; 
    } 

    &: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; 
      } 
    &::-webkit-input-placeholder { 
     color: #999999; 
    } 

    &:-moz-placeholder { 
     color: #999999; 
    } 

    &: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; 
    } 
}

來源

2014-04-24 user3480982

'text-align：center;'在輸入字段將有所幫助。但是爲什麼在輸入字段周圍有'.loginfield'' div，沒有包含CSS的CSS。這裏是一個[JSFiddle]（http://jsfiddle.net/AENgL/）。 –

這很容易，你需要應用到所有的輸入，或者指定class和id

input{ 
    text-align: center; 
} 

.text_center{ 
    text-align: center; 
}

看到這個例子： http://jsfiddle.net/R85LS/

來源

2014-04-24 15:15:13 JoseAPL

對齊輸入中間

回答

相關問題