html - CSS对齐文本框输入

Question

我想对齐我的文本框输入。目前它看起来像这样:

http://2.imgland.net/Fk7zSx.png

我找不到将它居中的方法。

这是我的登录CSS:

.login{
background:url(../images/footer.png) bottom left repeat-x;
width:330px;
text-shadow: 0px 2px 3px rgba(0, 0, 0, 1);
font-family:'Oswald', Helvetica, Arial, sans-serif;
color:#fff;
font-size:13px;
font-weight:700;
text-transform:uppercase;
padding:0px 0px 16px 0px;
margin:0px 0px 10px 1px;
float:left;
vertical-align:top;

另外，我的文本字段输入和文本区域 css:

  /* Forms */

textarea, input {
    color: #666;
    padding: 5px;
    border: solid 1px #E5E5E5;
    background: url(../images/textfield.png) 0 0 repeat-x white;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    transition: all 0.35s ease-in-out;
    -moz-transition: all 0.35s ease-in-out;
    -webkit-transition: all 0.35s ease-in-out;
    -o-transition: all 0.35s ease-in-out;
    width:220px;
}
textarea:focus, input:focus {
    outline:none;
}
textarea:hover, input:hover, textarea:active, input:active {
    border:1px solid #2ac0ff;
    transition: all 0.35s ease-in-out;
    -moz-transition: all 0.35s ease-in-out;
    -webkit-transition: all 0.35s ease-in-out;
    -o-transition: all 0.35s ease-in-out;
}
textarea {
    background: url(../images/textarea.png) 0 0 repeat-x white;
    height:152px;
}

所以，我找不到将它居中的方法。此外，如果需要，这是我的 html 登录表单:

<div class="login">
<div class="header">Login / Register</div>
    <form action="login.php" method="post">
        <li>
            Username: <br>
            <input type="text" name="username">
        </li>
        <li>
            Password: <br>
            <input type="password" name="password">
        </li>
        <li>
            <input type="submit" value="Log in">
        </li>
        <?php
            /* Form file */
            Token::create();
        ?>

    <center>    <h3><a href="register.php">New account</a></h3>
    <font size="1">- Lost <a href="recovery.php?mode=username">username</a> or <a href="recovery.php?mode=password">password</a>?</font></center>
    </form>
    </div>  

有什么方法可以对齐吗？我尝试了几种方法，但都没有真正奏效。

Answer 1

将 css text-align: center; 添加到类登录检查此 fiddle