如何在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.