如何使表格单元格中的复选框居中？答案

【问题标题】：How to center a checkbox in a table cell?如何使表格单元格中的复选框居中？
【发布时间】：2011-06-30 05:28:01
【问题描述】：

单元格只包含一个复选框。由于表格标题行中的文本，它相当宽。如何使复选框居中（在我的 HTML 中使用内联 CSS？（我知道））

我试过了

 <td>
      <input type="checkbox" name="myTextEditBox" value="checked" 
      style="margin-left:auto; margin-right:auto;">
 </td>

但这没有用。我究竟做错了什么？

更新：这是一个测试页面。有人可以纠正它 - 在 HTML 中使用 CSS 内联 - 以便复选框在它们的列中居中？

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Alignment test</title>
</head>
<body>

<table style="empty-cells:hide; margin-left:auto; margin-right:auto;" border="1"   cellpadding="1" cellspacing="1">

  <tr>
    <th>Search?</th><th>Field</th><th colspan="2">Search criteria</th><th>Include in report?<br></th>
  </tr>

  <tr>
    <td>
        <input type="checkbox" name="query_myTextEditBox" style="text-align:center; vertical-align: middle;">    
    </td>

    <td>
      myTextEditBox
    </td>

    <td>
       <select size ="1" name="myTextEditBox_compare_operator">
        <option value="=">equals</option>
        <option value="<>">does not equal</option>
       </select>
    </td>

    <td>
      <input type="text" name="myTextEditBox_compare_value">
    </td>

    <td>
      <input type="checkbox" name="report_myTextEditBox" value="checked" style="text-align:center; vertical-align: middle;">
    </td>

  </tr>

</table>


</body>
</html>

我已经接受了@Hristo 的回答——这里是内联格式......

<table style="empty-cells:hide;" border="1"   cellpadding="1" cellspacing="1">

    <tr>
        <th>Search?</th><th>Field</th><th colspan="2">Search criteria</th><th>Include in report?<br></th>
    </tr>

    <tr>
        <td style="text-align: center; vertical-align: middle;">
            <input type="checkbox" name="query_myTextEditBox">    
        </td>

        <td>
            myTextEditBox
        </td>

        <td>
            <select size ="1" name="myTextEditBox_compare_operator">
                <option value="=">equals</option>
                <option value="<>">does not equal</option>
            </select>
        </td>

        <td>
            <input type="text" name="myTextEditBox_compare_value">
        </td>

        <td style="text-align: center; vertical-align: middle;">
            <input type="checkbox" name="report_myTextEditBox" value="checked">
        </td>

    </tr>

</table>

【问题讨论】：

将使其在 IE8,9 中工作。但是在 IE10 或 chrome 中，无论您是否看到该框，都会在框内定义复选框或单选框。该框将始终左对齐。但在定义框内，复选框或单选框居中。如果包含 TD 的宽度为 100px，复选框为 50px，则始终左对齐。要使复选框居中，可以将复选框的定义框设为 100px，与包含 TD 的宽度相同。

标签： html css

【解决方案1】：

这个怎么样...http://jsfiddle.net/gSaPb/

查看我在 jsFiddle 上的示例：http://jsfiddle.net/QzPGu。代码sn-p：

td {
  text-align: center;
  /* center checkbox horizontally */
  vertical-align: middle;
  /* center checkbox vertically */
}

table {
  border: 1px solid;
  width: 200px;
}

tr {
  height: 80px;
}

<table>
  <tr>
    <td>
      <input type="checkbox" name="myTextEditBox" value="checked" /> checkbox
    </td>
  </tr>
</table>

【讨论】：

+1 谢谢，但在我的示例中似乎不起作用。请查看更新后的问题
+1 这行得通。我已经在上面发布了更新的代码 - 带有内联格式。现在我只需要进行一些文件比较并找出使它起作用的区别。谢谢
关闭，但似乎与我的 bootstrap-4 表略有不同。列标题肯定居中，但复选框有点偏左

【解决方案2】：

试试

<td style="text-align:center;">
  <input type="checkbox" name="myTextEditBox" value="checked" />
</td>

【讨论】：

+1 谢谢，但在我的示例中似乎不起作用。请查看更新后的问题
我刚刚使用我在 Chrome 9 中的解决方案测试了您更新的代码，它可以工作。
+1 如果它在 MS IE 和 FireFox 中工作并且您在此处发布代码，那么答案就是您的了。

【解决方案3】：

试试这个，应该可以的，

td input[type="checkbox"] {
    float: left;
    margin: 0 auto;
    width: 100%;
}

【讨论】：

【解决方案4】：

这应该可以，我正在使用它：

<td align="center"> <input type="checkbox" name="myTextEditBox" value="checked" ></td>

【讨论】：

@Gerard，谁在这里谈论 HTML5？

【解决方案5】：

用于动态编写td元素，不直接依赖td样式

  <td>
     <div style="text-align: center;">
         <input  type="checkbox">
     </div>
  </td>

【讨论】：

也许是而不是
?
div 是块元素；它的默认显示值为“block”。使用 span，输入在左侧继续。测试看看差异
一个很好的解释，这将有助于未来的其他人（+1）欢迎加入

【解决方案6】：

拉出所有内联 CSS，并将其移至头部。然后在单元格上使用类，这样您就可以随意调整所有内容（不要使用“中心”之类的名称 - 您可以在 6 个月后将其更改为左...）。对齐答案仍然相同 - 将其应用于 <td> 而不是复选框（这只会使您的支票居中:-)）

使用您的代码...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Alignment test</title>
<style>
table { margin:10px auto; border-collapse:collapse; border:1px solid gray; }
td,th { border:1px solid gray; text-align:left; padding:20px; }
td.opt1 { text-align:center; vertical-align:middle; }
td.opt2 { text-align:right; }
</style>
</head>
<body>

<table>

      <tr>
        <th>Search?</th><th>Field</th><th colspan="2">Search criteria</th><th>Include in report?<br></th>
      </tr>
      <tr>
        <td class="opt1"><input type="checkbox" name="query_myTextEditBox"></td>
        <td>
          myTextEditBox
        </td>
        <td>
           <select size ="1" name="myTextEditBox_compare_operator">
            <option value="=">equals</option>
            <option value="<>">does not equal</option>
           </select>
        </td>
        <td><input type="text" name="myTextEditBox_compare_value"></td>
        <td class="opt2">
          <input type="checkbox" name="report_myTextEditBox" value="checked">
        </td>
      </tr>
    </table>
    </body>
    </html>

【讨论】：

别忘了...td 是一种“特殊”元素。它有自己独特的行为——比如块状婚姻和内嵌婚姻（来自地狱）。

【解决方案7】：

如果您不支持旧版浏览器，我会使用flexbox，因为它是well supported，可以轻松解决您的大部分布局问题。

#table-id td:nth-child(1) { 
    /* nth-child(1) is the first column, change to fit your needs */
    display: flex;
    justify-content: center;
}

这会将所有内容集中在每行的第一个 <td> 中。

【讨论】：

【解决方案8】：

将check元素的float属性定义为none：

float: none;

并将父元素居中：

text-align: center;

这是唯一对我有用的。

【讨论】：

继承的“float:left;”正在为我毁了它。设置“浮动：无”修复它。

【解决方案9】：

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>

<table class="table table-bordered">
  <thead>
    <tr>
      <th></th>
      <th class="text-center">Left</th>
      <th class="text-center">Center</th>
      <th class="text-center">Right</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>
        <span>Bootstrap (class="text-left")</span>
      </th>
      <td class="text-left">
        <input type="checkbox" />
      </td>
      <td class="text-center">
        <input type="checkbox" checked />
      </td>
      <td class="text-right">
        <input type="checkbox" />
      </td>
    </tr>
    <tr>
      <th>
        <span>HTML attribute (align="left")</span>
      </th>
      <td align="left">
        <input type="checkbox" />
      </td>
      <td align="center">
        <input type="checkbox" checked />
      </td>
      <td align="right">
        <input type="checkbox" />
      </td>
    </tr>
  </tbody>
</table>

【讨论】：

【解决方案10】：

我的问题是 position: absolute !important 的父样式不允许我编辑。

所以我给了我的特定复选框position: relative !important，它修复了垂直错位问题。

【讨论】：

【解决方案11】：

确保您的 <td> 不是 display: block;

浮动可以做到这一点，但更容易做到：display: inline;

【讨论】：