Question

使用显示值来组织表单我不是很好，如果你能给我一个能够以最新方式组织的例子，那就太棒了。

我正在创建一个登录/注册系统，我想将输入字段置于div中心。这是登录表单的代码： -

<body style='font-family: Times New Roman, verdana, sans-serif;'>
    <div style='width: 70%; padding 10px; border: 5px solid #316ED6; background-color: #648CD1; color: #31D8EB; margin: auto; text-align: center;'>
        <h1>Register Now!</h1>
        <br />
        <form action='' method='post'/>
            <table>
                <tr>
                    <td>
                        <b>Username:</b>
                    </td>
                    <td>
                        <input type='text' name='username' style='padding: 4px'/>
                    </td>
                <tr>
                    <td>
                        <b>Password:</b>
                    </td>
                    <td>
                        <input type='password' name='password' style='padding: 4px'/>
                    </td>
                </tr>
                <tr>
                    <td>
                        <b>Re-enter Password</b>
                    </td>
                    <td>
                        <input type='passsword' name='passwordconfirm' style='padding: 4px'/>
                    </td>
                </tr>
                <tr>
                    <td>
                        <b>First and Last Name:</b>
                    </td>
                    <td>
                        <input type='text' name='name' style='padding: 4px'/>
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type='submit' name='register' value='Complete Registration'/>
                    </td>
                </tr>
            </table>
        </form>
        <h4>Already own a Connection account? Login <a href='index.php'>Here!</a></h4>
    </div>
</body>

Answer 1

最简单的方法是提供表格display: inline-block。

在text-align: left;上设置table将控制label文字对齐

＆＃13;

<body style='font-family: Times New Roman, verdana, sans-serif;'>
    <div style='width: 70%; padding 10px; border: 5px solid #316ED6; background-color: #648CD1; color: #31D8EB; margin: auto; text-align: center;'>
        <h1>Register Now!</h1>
        <br />
        <form action='' method='post' style="display: inline-block" />
            <table style="text-align: center;">
                <tr>
                    <td>
                        <b>Username:</b>
                    </td>
                    <td>
                        <input type='text' name='username' style='padding: 4px'/>
                    </td>
                <tr>
                    <td>
                        <b>Password:</b>
                    </td>
                    <td>
                        <input type='password' name='password' style='padding: 4px'/>
                    </td>
                </tr>
                <tr>
                    <td>
                        <b>Re-enter Password</b>
                    </td>
                    <td>
                        <input type='passsword' name='passwordconfirm' style='padding: 4px'/>
                    </td>
                </tr>
                <tr>
                    <td>
                        <b>First and Last Name:</b>
                    </td>
                    <td>
                        <input type='text' name='name' style='padding: 4px'/>
                    </td>
                </tr>
                <tr>
                    <td>
                    </td>
                    <td>
                        <input type='submit' name='register' value='Complete Registration' style="width: 100%"/>
                    </td>
                </tr>
            </table>
        </form>
        <h4>Already own a Connection account? Login <a href='index.php'>Here!</a></h4>
    </div>
</body>

＆＃13;

旁注：

通过像这样更新最后一个tr，您也可以获得一个很好的定位按钮

<tr>
  <td>
  </td>
  <td>
    <input type='submit' name='register' value='Complete Registration' style="width: 100%"/>
  </td>
</tr>

Answer 2

您只需在表格中添加css规则

即可

    table{
         margin:0 auto;
    }

Answer 3

最简单的方法是使用中心标记<center> </center>

我编辑了您的代码以使整个表单居中。

<body style='font-family: Times New Roman, verdana, sans-serif;'>
    <div style='width: 70%; padding 10px; border: 5px solid #316ED6; background-color: #648CD1; color: #31D8EB; margin: auto; text-align: center;'>
        <h1>Register Now!</h1>
        <br />
        <center>
        <form action='' method='post'/>
            <table>
                <tr>
                    <td>
                        <b>Username:</b>
                    </td>
                    <td>
                        <input type='text' name='username' style='padding: 4px'/>
                    </td>
                <tr>
                    <td>
                        <b>Password:</b>
                    </td>
                    <td>
                        <input type='password' name='password' style='padding: 4px'/>
                    </td>
                </tr>
                <tr>
                    <td>
                        <b>Re-enter Password</b>
                    </td>
                    <td>
                        <input type='passsword' name='passwordconfirm' style='padding: 4px'/>
                    </td>
                </tr>
                <tr>
                    <td>
                        <b>First and Last Name:</b>
                    </td>
                    <td>
                        <input type='text' name='name' style='padding: 4px'/>
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type='submit' name='register' value='Complete Registration'/>
                    </td>
                </tr>
            </table>
        </form>
        </center>
        <h4>Already own a Connection account? Login <a href='index.php'>Here!</a></h4>
    </div>
</body>

Answer 4

下面的代码段

form{
  text-align:center;
}
#form_table{
display:inline-table;
}

<body style='font-family: Times New Roman, verdana, sans-serif;'>
  <div style='width: 70%; padding 10px; border: 5px solid #316ED6; background-color: #648CD1; color: #31D8EB; margin: auto; text-align: center;' id="meta_container">
    <h1>Register Now!</h1>
    <br />
    <form action='' method='post'/>
    <table id="form_table">
      <tr>
        <td>
          <b>Username:</b>
        </td>
        <td>
          <input type='text' name='username' style='padding: 4px' />
        </td>
        <tr>
          <td>
            <b>Password:</b>
          </td>
          <td>
            <input type='password' name='password' style='padding: 4px' />
          </td>
        </tr>
        <tr>
          <td>
            <b>Re-enter Password</b>
          </td>
          <td>
            <input type='passsword' name='passwordconfirm' style='padding: 4px' />
          </td>
        </tr>
        <tr>
          <td>
            <b>First and Last Name:</b>
          </td>
          <td>
            <input type='text' name='name' style='padding: 4px' />
          </td>
        </tr>
        <tr>
          <td>
            <input type='submit' name='register' value='Complete Registration' />
          </td>
        </tr>
    </table>
    </form>
    <h4>Already own a Connection account? Login <a href='index.php'>Here!</a></h4>
  </div>
</body>

如何集中输入字段？

4 个答案: