如何將表格放在表格中間？

Question

下面的代碼適用於我所需要的（三個水平按鈕），除非它不居中。它位於屏幕的左側。我做了一些研究，無法修復它，並嘗試使用「float」和「display：inline」的無表設計，但無法使其居中。請幫助！

<table> 
<td> 
<tr> 
<form method="get" action="index.php"><button type="submit">Home</button></form> 
<form method="get" action="signup"><button type="submit">Create Account</button></form> 
<form method="get" action="login"><button type="submit">Login to Account</button></form> 
</tr> 
</td> 
</table> 

Answer 1

正如其他人提到的<td>應該在<tr>之內。默認情況下，<form>顯示爲塊元素。將其更改爲inline-block。

table { 
 
    border: 1px solid red; 
 
    width: 100%; 
 
} 
 
td { 
 
    border: 1px solid green; 
 
    text-align: center; 
 
} 
 
form { 
 
    display: inline-block; 
 
}

<table> 
 
    <tr> 
 
    <td> 
 
     <form method="get" action="index.php"> 
 
     <button type="submit">Home</button> 
 
     </form> 
 
     <form method="get" action="signup"> 
 
     <button type="submit">Create Account</button> 
 
     </form> 
 
     <form method="get" action="login"> 
 
     <button type="submit">Login to Account</button> 
 
     </form> 
 
    </td> 
 
    </tr> 
 
</table>

Answer 2

<tr>的（行）應該是在外面

<table> 
    <tr> 
     <td> 
      <form method="get" action="index.php"><button type="submit">Home</button></form> 
     </td> 
     <td> 
      <form method="get" action="signup"><button type="submit">Create Account</button></form> 
     </td> 
     <td> 
      <form method="get" action="login"><button type="submit">Login to Account</button></form> 
     </td> 
    </tr> 
</table> 

jsFiddle Demo

Answer 3

逆HTML中的tr和td。

<table> 
<tr> 
<td> 
<form method="get" action="index.php"><button type="submit">Home</button></form> 
</td> 
<td> 
<form method="get" action="signup"><button type="submit">Create Account</button></form> 
</td> 
<td> 
<form method="get" action="login"><button type="submit">Login to Account</button></form> 
</td> 
</tr> 
</table> 

，然後嘗試在這CSS

td { 
    text-align: center; 
} 

而且不要忘記設置你的表格的寬度！ （所有窗口100％）