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;

}

另外，我的textfields输入和textarea 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

Answer 2

样式表中的

只需使用（清除：两者;）为div你想对齐中心。然后定义（align：center;）

CSS对齐文本字段输入

2 个答案: