如何在html / css中对齐页面中心的表单
[英]How to align form at the center of the page in html/css
问题描述
我是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";
}
我该如何更改代码以使整个表单在中心对齐？
6 个解决方案
解决方案1
22 已采纳 2013-09-30 07:51:29
像这样
CSS
body {
background-color : #484848;
margin: 0;
padding: 0;
}
h1 {
color : #000000;
text-align : center;
font-family: "SIMPSON";
}
form {
width: 300px;
margin: 0 auto;
}
解决方案2
8 2014-11-13 15:09:59
这是我的答案。 我不是专业人士。 我希望这个答案可以帮到你：3
<div align="center">
<form>
.
.
Your elements
.
.
</form>
</div>
解决方案3
2 2013-09-30 07:54:30
我只是使用表而不是表单。 它通过使用保证金完成。
table {
margin: 0 auto;
}
也尝试使用类似的东西
table td {
padding-bottom: 5px;
}
而不是<br />
并且您的输入应以/>结尾，例如：
<input type="password" name="cpwd" />
解决方案4
1 2014-01-07 01:46:58
或者您可以使用<center></center>标签。
解决方案5
1 2015-11-20 10:12:21
将<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>
解决方案6
1 2018-10-02 03:57:41
- 将元素包装在div容器中，就像你的表格一样，或类似的东西。
- 设置css属性：
- 宽度：30％; （或任何你想要的）
- 保证金：自动; 请看下面的图片了解更多细节。
如何在HTML / CSS中将表单与中心对齐
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.