Question

我有一个表单，我想将文本框和标签置于中间位置。我怎样才能做到这一点？（我本以为左右对齐自动会这样做，但它不起作用）。这是我的代码：

<body>
    <div id="formWrapper">
          </center>
          <form method ="post" action="addMember.php">
          <label for="name">Username:</label>
          <input name="name"/>
          <label for="password">Password:</label>
          <input name="password"/>
          <label for="email">Email:</label>
          <input name="email"/>
            <p>
            <fieldset>
            <input class="btn" name="submit" type="Submit" value="Register"/>
            <input class="btn" name="reset" type="reset" value="Clear Form">
            </fieldset>
      </form>
    </div>
</body>

风格：

#formWrapper{
    width:550px;
    padding: 2em 0 2em 0;
    border:solid 5px #F1F1F1;
    margin-top: 100px;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
    background-color: #AFC8DE;
}

Answer 1

如果您将text-align: center应用于表单，则会将字段放在中心。

语义在这里非常重要，所以请看一下表单的可访问方法。 http://www.alistapart.com/articles/prettyaccessibleforms

Answer 2

看看这个：http://jsfiddle.net/7auS8/

Answer 3

将 align =“center”添加到表单

div id="formWrapper">
        <form method ="post" action="addMember.php" align="center">
            <label for="name" >Username:</label>
            <input name="name"/>
            <p>
            <label for="password">Password:</label>
            <input name="password"/>
            <p>
            <label for="email">Email:</label>
            <input name="email"/>
            <p>
            <fieldset>
                <input class="btn" name="submit" type="Submit" value="Register"/>
                <input class="btn" name="reset" type="reset" value="Clear Form">
            </fieldset>
        </form>
    </div>

Answer 4

    border: 1px solid gray;
    border-radius:5px;
    color: #393939;
    height: 30px;
    padding: 0px 6px 0 6px;
    width: 186px;

Answer 5

我接受了这段代码并尝试了解决方案，它确实将表格置于中心位置。克里斯也是正确的语义在这里非常重要，因为在看到它之后我觉得这可能不是你想要的。另一点我想补充一点，读到这个可能是初学者的人就是当你添加text-align：center;它需要进入css文件并以;

结尾

如何集中输入文本框HTML？

5 个答案: