CSS \\ HTML \\ table 内的中心按钮

Question

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

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 中使用 "table"，而不是分别从 HTML 中调用 ID。

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

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>

CSS \\ HTML \\ table 内的中心按钮

CSS \\ HTML \\ Center buttons inside of a table

html

css

web-applications

button

centering