在中心制作表格

Question

我是网络编程的初学者,我想在页面的中心创建表单,使用CSS和HTML,我该怎么做？

<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>

Answer 1

添加具有明确宽度和边距的div :0 auto.这是水平居中项目的CSS方式.将页面垂直居中是不容易的.

 <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>

您可以使用position:fixed,但另外,我建议只添加一个合适的margin-top,如上所示.

这是一个关于JSFiddle 的例子.请享用!

PS对于margin标签,值为margin:[top] [right] [bottom] [left],因此为什么我为top提供200px,为bottom提供0px,为左右提供auto.