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

Question

I am new to html/css. 我是html / css的新手。 i am trying to build up my own form and i am trying to align it in the center. 我正在尝试建立自己的形式，我试图在中心对齐它。 I used the align property in css but its not working. 我在css中使用了align属性，但它不起作用。

Html code: 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 Code: Css代码：

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

How should i change my code to align the entire form in the center? 我该如何更改代码以使整个表单在中心对齐？

Answer 1

Like this 像这样

demo 演示

css CSS

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

Answer 2

This is my answer. 这是我的答案。 I'm not a Pro. 我不是专业人士。 I hope this answer may help you :3 我希望这个答案可以帮到你：3

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

Answer 3

I would just use table and not the form. 我只是使用表而不是表单。 Its done by using margin. 它通过使用保证金完成。

table {
  margin: 0 auto;
}

also try using something like 也尝试使用类似的东西

table td {
    padding-bottom: 5px;
}

instead of <br /> 而不是<br />

and also your input should end with /> eg: 并且您的输入应以/>结尾，例如：

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

Answer 4

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

Answer 5

Wrap the <form> element inside a div container and apply css to the div instead which makes things easier. 将<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>

Answer 6

Wrap the element inside a div container as a row like your form here or something like that. 将元素包装在div容器中，就像你的表格一样，或类似的东西。
Set css attribute: 设置css属性：
- width: 30%; 宽度：30％; (or anything you want) （或任何你想要的）
- margin: auto; 保证金：自动; Please take a look on following picture for more detail. 请看下面的图片了解更多细节。

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

问题描述

6 个解决方案

解决方案1
22 已采纳 2013-09-30 07:51:29

解决方案2
8 2014-11-13 15:09:59

解决方案3
2 2013-09-30 07:54:30

解决方案4
1 2014-01-07 01:46:58

解决方案5
1 2015-11-20 10:12:21

解决方案6
1 2018-10-02 03:57:41

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

问题描述

6 个解决方案

解决方案1 22 已采纳 2013-09-30 07:51:29

解决方案2 8 2014-11-13 15:09:59

解决方案3 2 2013-09-30 07:54:30

解决方案4 1 2014-01-07 01:46:58

解决方案5 1 2015-11-20 10:12:21

解决方案6 1 2018-10-02 03:57:41

解决方案1
22 已采纳 2013-09-30 07:51:29

解决方案2
8 2014-11-13 15:09:59

解决方案3
2 2013-09-30 07:54:30

解决方案4
1 2014-01-07 01:46:58

解决方案5
1 2015-11-20 10:12:21

解决方案6
1 2018-10-02 03:57:41