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 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 2

您可以使用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>

Answer 3

在CSS中尝试

input[type='checkbox'] {
  margin: 0 auto;
}

Answer 4

试试看 CSS

 input[type='checkbox'] { 
       vertical-align: center; 
 }

Answer 5

我正在为这个简单的表进行引导

尝试将Bootstrap m-auto类添加到input元素中。

Answer 6

这对我有用。感谢所有回答的人，如果没有真棒的人，这个社区就不会是它。

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

信贷归这家伙。 https://stackoverflow.com/a/20042250/4526963

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

6 个答案: