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 code:
<!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:
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?
Like this
css
body {
background-color : #484848;
margin: 0;
padding: 0;
}
h1 {
color : #000000;
text-align : center;
font-family: "SIMPSON";
}
form {
width: 300px;
margin: 0 auto;
}
This is my answer. I'm not a Pro. I hope this answer may help you :3
<div align="center">
<form>
.
.
Your elements
.
.
</form>
</div>
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 />
and also your input should end with />
eg:
<input type="password" name="cpwd" />
或者您可以使用<center></center>
标签。
Wrap the <form>
element inside a div
container and apply css to the div
instead which makes things easier.
#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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.