如何在 html/css 中对齐页面中心的表单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19089018/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to align form at the center of the page in html/css
提问by poorvank
I am new to 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.
我是 html/css 的新手。我正在尝试建立自己的表格，并试图将其对齐在中心。我在 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?
我应该如何更改代码以将整个表单居中对齐？
回答by Falguni Panchal
回答by Puvipavan
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>
回答by Lucky
Wrap the <form>element inside a divcontainer and apply css to the divinstead 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>回答by Ruddy
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 />e.g:
并且您的输入应以/>例如结尾：
<input type="password" name="cpwd" />
回答by ashish0810
Or you can just use the <center></center>tags.
或者你可以只使用<center></center>标签。
回答by Hai Dinh
- Wrap the element inside a div container as a row like your form here or something like that.
- Set css attribute:
- width: 30%; (or anything you want)
- margin: auto;
Please take a look on following picture for more detail.
- 将元素包裹在一个 div 容器中，就像你的表单或类似的东西一样。
- 设置css属性：
- 宽度：30%；（或任何你想要的）
- 保证金：自动；请查看以下图片了解更多详情。
