Question

我已尝试所有其他方式搜索stackoverflow等但无法找到我的答案我的div id是loginbox。

  <div id="loginbox">
<form action="post">
    <table>
        <tr>
        <td><label>Username:</label></td>
        <td><input id="username" type="text" placeholder="username"/></td>
        </tr>
        <tr>
          <td><label>Password:</label></td>
         <td><input id="password" type="password" placeholder="password"/></td>
        </tr>
        <tr>
         <td></td>
        <td><input type="submit" value="Login" /></td>
        </tr>
</table> 
</form>
</div>

Answer 1

取决于您想要的具体内容：

#loginbox table { margin:auto; }

或

#loginbox * { text-align:center; }

或

#loginbox table * { margin:auto; }

或任何组合！？

Answer 2

我看不到您的CSS，但考虑到您的问题中的内容，这应该有效：

#loginbox form table {
    margin: 0 auto;
}

演示：http://jsfiddle.net/TmY46/

这与HTML5无关。这纯粹是CSS。

Answer 3

首先或全部，你不应该使用表格。无论如何，这样的事情：

td{text-align:center;}
form input{display:block;margin:auto;}

如果你真的想在html5中编码，我建议你使用不同的结构，喜欢：

<form>
<p><label>Username :</label><input type=text /><span style="clear:both"></span></p>
<p><label>Password :</label><input type=password /><span style="clear:both"></span></p>

<input type=submit vale="login" />
</form>

在css中：

form {margin:auto;}
form p{display:block;margin:3px 0;}
form input[type=text], form input[type=password]{float:left;width:150px;}

我会这样做，它更干净，更灵活

我如何使div中的所有元素都集中在HTML5中

3 个答案: