如何将复选框移动到表单元格中的中心

Question

我正在为引导处理这个简单的表，我对引导和/或css没有真正的经验。我需要这些复选框放在列的中间，但问题是它们停留在最左边。我将css (与<style>一起)用于创建一个自定义类并设置float: none，只是为了看看它是否有用，但没有帮助，而且由于是复选框，所以文本对齐没有多大帮助。

下面是一张图片：

​

下面是HTML：

<tr id="emailDiv" style="display: none">
    <td style="white-space: nowrap; width: 30%"><span id="emaillabel">Email Label</td>
    <td style="width: 5%">
        <input type="button" value="Edit" id="emailAlert" class="btn btn-default btn-block-mobile btn-xs" />
    </td>
    <td class="text-center" style="width: 8%">
        <input type="checkbox" class="sub-col-1 dont-get-data" data-billaccount="emailField" data-subtype="15" />
    </td>
    <td style="width: 8%">
        <input type="checkbox" class="sub-col-2 dont-get-data" data-billaccount="emailField" data-subtype="16" />
    </td>
    <td style="width: 8%">
        <input type="checkbox" class="sub-col-3 dont-get-data" data-billaccount="emailField" data-subtype="17" />
    </td>
    <td style="width: 8%">
        <input type="checkbox" class="sub-col-4 dont-get-data" data-billaccount="emailField" data-subtype="18" />
    </td>
    <td style="width: 8%">
        <input type="checkbox" class="sub-col-5 dont-get-data" data-billaccount="emailField" data-subtype="19" />
    </td>
    <td style="width: 8%">
        <input type="checkbox" class="sub-col-6 dont-get-data" data-billaccount="emailField" data-subtype="20" />
    </td>
    <td style="width: 8%">
        <input type="checkbox" class="sub-col-7 dont-get-data" data-billaccount="emailField" data-subtype="21" />
    </td>
</tr>

Answer 1

这对我有用。感谢每一个回答的人，没有你们这些了不起的人，这个社区就不会是什么样子了。

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

这家伙的功劳。https://stackoverflow.com/a/20042250/4526963

Answer 2

这样就行了。

内嵌式

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

但是如果你用一个类

CSS：

 .center-check-box{
    text-align:center; 
    vertical-align:middle;
 }

HTML：

 <td class="center-check-box">
    <input type="checkbox"> 
 </td>

Answer 3

可以使用css类。

​

.myCheckbox {
  text-align : center;
  border: 1px solid red; /* for illustration only */
  width:125px; /* for illustration only */
}

<table>
<tr>
<td class="myCheckbox">
  <input type="checkbox">
</td>
</tr>
</table>

​