Making A Form At The Center_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-03-26 16:47 出处：网络

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?

相关专题：css

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.