Making A Form At The Center
I am a beginner whe开发者_JAVA技巧n it comes to web programming, and I wanted to make my form on the center of the page, using CSS and HTML, how can I do it?
<form action="login.php" method="post">
username: <input type="text" id="txtusername" /><br />
password: <input type="text" id="txtpassword" /><br />
<input type="submit" value="login" />
</form>
Add a div with an explicit width and margin: 0 auto. This is the CSS way to center an item horizontally. There's no easy hack to make a page centered vertically.
<div style="width: 500px; margin: 200px auto 0 auto;">
<form action="login.php" method="post">
Username: <input type="text" id="txtusername" /><br />
Password: <input type="text" id="txtpassword" /><br />
<input type="submit" value="login" />
</form>
</div>
You could either use position:fixed, but alternatively, I would suggest simply adding an appropriate margin-top, as seen above.
Here is an example on JSFiddle. Enjoy!
P.S. For the margin tag, the values are margin: [top] [right] [bottom] [left], hence why I did 200px for top, 0px for bottom, and auto for both left and right.
<table border="0" align="center" cellpadding="0" cellspacing="0" width="300">
<tr>
<td>
<form method="post" action="flogin.php">
<table width="100%" cellpadding="7" cellspacing="0" border="0">
<tr>
<td colspan="3"><center><strong>Insert Values In DataBase </strong></center><br /></td><br />
</tr>
<tr>
<td width="30%">Name</td>
<td width="10%">:</td>
<td width="60%"><input type="text" name="name" /></td>
</tr>
<tr>
<td width="30%">Last Name</td>
<td width="10%">:</td>
<td width="60%"><input type="text" name="lastname" /></td>
</tr>
<tr>
<td width="30%">Email</td>
<td width="10%">:</td>
<td width="60%"><input type="text" name="email" /></td>
</tr>
<tr>
<td colspan="3"><center><input type="submit" name="submit" /></center><br /></td>
</tr>
</table>
</form>
</td>
</tr>
</table>
Add below style in <HEAD> tag:
<STYLE type="text/css">
form {
margin: auto;
width: 30em; /* try other values as well */
}
</STYLE>
BTW, are you writing HTML or XHTML, because in HTML you don't close empty tags like <BR> not <BR /> and no /> at the end of the input tags. In XHTML you do close them.
加载中,请稍侯......
精彩评论