Как я могу сделать все элементы в div-центрированном HTML5

Question

Я пробовал поиск по другому пути в stackoverflow и т. Д., Но не смог найти свой ответ my 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

Я не могу увидеть ваш CSS, но учитывая только то, что в вашем вопросе, это должно работать:

#loginbox form table { 
    margin: 0 auto; 
} 

Демо: http://jsfiddle.net/TmY46/

И это не связано с HTML5. Это чисто CSS.

Answer 2

В зависимости от того, что именно вы хотите иметь:

#loginbox table { margin:auto; } 

или

#loginbox * { text-align:center; } 

или

#loginbox table * { margin:auto; } 

или любой комбинации !?

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

Вот как я бы сделал, он чист и много гибкий