html - 在中间对齐输入

Question

我的名称和密码输入字段不会在中间对齐，有人可以帮助我吗？我已经添加了相关的 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;
    }
}

Answer 1

很简单，你需要应用到所有的输入，或者指定class或者id

input{
    text-align: center;
}

.text_center{
     text-align: center;
}

看这个例子: http://jsfiddle.net/R85LS/