在中心制作表格

我是一名初学者，当谈到网络编程时，我想用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>

来源

2011-08-09 Caffeinatedwolf

添加一个div一个明确的宽度和保证金：0汽车。这是水平居中放置物品的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>

您既可以使用位置：固定，但或者，我会建议简单地增加一个适当的边距，如上面看到的。

这是JSFiddle上的example。请享用！

P.S.对于页边距标记，值为margin：[top] [right] [bottom] [left]，因此为什么我对顶部做了200px，底部是0px，左右都是自动的。

来源

2011-08-09 07:54:31 ghayes

添加下面的风格在<HEAD>标签：

<STYLE type="text/css"> 
form { 
    margin: auto; 
    width: 30em; /* try other values as well */ 
} 
</STYLE>

顺便说一句，你在写HTML或XHTML，因为在HTML你不输入结束时关闭空标签，如<BR>不<BR />并没有/>标签。在XHTML中，你确实关闭了它们。

来源

2011-08-09 07:54:54 Ariel

好吧，我正在使用HTML，但我有一个关闭他们的行为，这是一个错误的事情吗？ – Caffeinatedwolf

这是不正确的HTML。大多数浏览器都会忽略它，但它可能会有一些细微的问题。你身处优秀的公司 - 我看到很多人错误地使用XHTML。 XHTML也是一个死的标准，所以你应该切换到普通的HTML。 – Ariel

至少在HTML5中，自闭标签也是有效的：http://dev.w3.org/html5/html-author/#void – davehauser

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

来源

2013-04-25 07:22:06

最好不要使用表格进行格式设置 –

在中心制作表格

回答

相关问题