html - 如何在 html/css 中对齐页面中心的表单

Question

我是 html/css 的新手。我正在尝试建立自己的表格，并尝试将其对齐在中心。我在 css 中使用了 align 属性，但它不起作用。

html代码：

<!DOCTYPE HTML>
<head>
    <title>Web Page Having A Form</title>
    <link rel = "stylesheet" type="text/css" href="Form.css">
</head>
<body>
    <h1>Create a New Account</h1>
      <form >
       <table>
        <tr>
         <td>Name :</td> <td><input type="text" name="name"></td><br>
        </tr>
        <tr>
         <td>Email :</td> <td><input type="text" name="email"></td><br>
        </tr>
        <tr>
         <td>Password :</td> <td><input type="password" name="pwd"></td><br>
        </tr>
        <tr>
         <td>Confirm Password :</td> <td><input type="password" name="cpwd"><br>
        </tr>
        <tr>
         <td><input type="submit" value="Submit"></td>
        </tr>
       </table>
      </form>
</body>

CSS代码：

    body
{
    background-color : #484848;
}
h1
{
    color : #000000;
    text-align : center;
    font-family: "SIMPSON";
}
form
{
    align:"center";
}

我应该如何更改我的代码以使整个表单居中对齐？

score 25 · Accepted Answer

像这样

演示

css

    body {
    background-color : #484848;
    margin: 0;
    padding: 0;
}
h1 {
    color : #000000;
    text-align : center;
    font-family: "SIMPSON";
}
form {
    width: 300px;
    margin: 0 auto;
}

score 8 · Accepted Answer

这是我的回答。我不是专业人士。我希望这个答案可以帮助你：3

<div align="center">
<form>
.
.
Your elements
.
.
</form>
</div>

score 2 · Accepted Answer

我只会使用表格而不是表格。它是通过使用边距完成的。

table {
  margin: 0 auto;
}

也尝试使用类似的东西

table td {
    padding-bottom: 5px;
}

代替<br />

你的输入也应该以/> 例如结束：

<input type="password" name="cpwd" />

score 2 · Accepted Answer

<form>将元素包装在div容器内并将 css 应用于div而不是使事情变得更容易。

#aDiv{width: 300px; height: 300px; margin: 0 auto;}

<html>

<head></head>

<body>
  <div>
    <form>
      <div id="aDiv">
        <table>
          <tr>
            <td>Name :</td>
            <td>
              <input type="text" name="name">
            </td>
            <br>
          </tr>
          <tr>
            <td>Email :</td>
            <td>
              <input type="text" name="email">
            </td>
            <br>
          </tr>
          <tr>
            <td>Password :</td>
            <td>
              <input type="password" name="pwd">
            </td>
            <br>
          </tr>
          <tr>
            <td>Confirm Password :</td>
            <td>
              <input type="password" name="cpwd">
              <br>
          </tr>
          <tr>
            <td>
              <input type="submit" value="Submit">
            </td>
          </tr>
        </table>
      </div>
    </form>
  </div>
</body>

</html>

score 1 · Accepted Answer

1

或者你可以只使用<center></center>标签。

于 2014-01-07T01:46:58.123 回答

score 1 · Accepted Answer

将 div 容器内的元素包装成一行，就像你的表单在这里或类似的东西。
设置css属性：
- 宽度：30%；（或任何你想要的）
- 边距：自动；请查看以下图片以获取更多详细信息。

html - 如何在 html/css 中对齐页面中心的表单

6 回答 6

Related

Reference