html - 表格内的 CSS\\HTML\\居中按钮

Question

我有 2 个表。 1 包含一个文本框表，另一个包含按钮。我可以将文本框居中，但按钮不能居中。

HTML:

<div class="Input">
<table id="InputTable">
    <tr></tr>
        <th><input type="text" placeholder="foo"></th>
        <th><input type="text" placeholder="foo"></th>      
    <tr></tr>
        <th><input type="text" placeholder="foo3"></th>
        <th><input type="text" placeholder="foo"></th>
    <tr></tr>
        <th><input type="text" placeholder="foo"></th>
        <th><input type="text" placeholder="foo"></th>
</table>
</div>

<div class="Buttons">
<table id="ButtonTable">
    <tr>
<button id="A" type="button">foo</button>
<button id="B" type="button">foo</button>
<button id="C" type="button">foo</button>
    </tr>
</table>
</div>

CSS:

#InputTable, #ButtonTable
{
    margin: 0 auto;
}
button
{   
    background-color: #D3D3D3;
    color: black;
    border: none;    
    padding: 5px 15px;
    text-align: center;    
    margin: 4px 2px;    
}

我还尝试在我的 CSS 中使用“表格”，而不是单独从 HTML 中调用 id。

还尝试在 1 个表格中添加按钮和文本框，但这并没有使我对齐，我认为最好将它们分开，因为按钮将用于计算文本框的值.

Answer 1

您可以将按钮放在 td 标签内:

#InputTable,
#ButtonTable {
  margin: 0 auto;
}

button {
  background-color: #D3D3D3;
  color: black;
  border: none;
  padding: 5px 15px;
  text-align: center;
  margin: 4px 2px;
}

<div class="Input">
  <table id="InputTable">
    <tr></tr>
    <th><input type="text" placeholder="foo"></th>
    <th><input type="text" placeholder="foo"></th>
    <tr></tr>
    <th><input type="text" placeholder="foo3"></th>
    <th><input type="text" placeholder="foo"></th>
    <tr></tr>
    <th><input type="text" placeholder="foo"></th>
    <th><input type="text" placeholder="foo"></th>
  </table>
</div>

<div class="Buttons">
  <table id="ButtonTable">
    <tbody>
      <tr>
        <td>
          <button id="A" type="button">foo</button>
        </td>
        <td>
          <button id="B" type="button">foo</button>
        </td>
        <td>
          <button id="C" type="button">foo</button>
        </td>
      </tr>
    </tbody>
  </table>
</div>