CSS \\ HTML \\ 表格内的中心按钮答案

【问题标题】：CSS \\ HTML \\ Center buttons inside of a tableCSS \\ HTML \\ 表格内的中心按钮
【发布时间】：2019-03-14 19:49:57
【问题描述】：

我有 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 中使用“table”，而不是分别从 HTML 中调用 id。

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

【问题讨论】：

您确定要使用表格吗？我可能会写这样的东西：jsfiddle.net/sheriffderek/fv1we8ck - 我建议你不要使用 ID 进行样式设置 - 并保持你的类名都是 kabob-case。使用div 和类输入之类的事情——当你有一堆输入时也可能会造成混淆。有些事情要考虑。 :)

标签： html css button web-applications centering

【解决方案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>

【讨论】：