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

【问题标题】：How to move checkboxes to the center in a table cell如何将复选框移动到表格单元格的中心
【发布时间】：2018-12-21 01:34:01
【问题描述】：

我正在为这个简单的引导表工作，但我对引导和/或 css 没有任何经验。我需要这些复选框位于其列的中心，但问题是它们位于最左侧。我将 css（与 <style> 一起）创建了一个自定义类并设置了 float: none，只是想看看这是否有帮助，但它没有。而且由于它是复选框，所以 text-align 并没有多大帮助。

这是一张图片：

这是 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>

【问题讨论】：

尝试将m-auto 类添加到input 元素中。
我对这里众多答案的整体质量感到震惊
@Martin Lol 是的，我当时想“哦，废话，我是不是在错误的地方？”。用 Bootstrap 标记它以获得更多特异性。
@EdwardSeverinsen 我们不知道它是什么版本的 Bootstrap，OP 真的应该通知我们;-)（提示！）
@Martin 抱歉，我仍在处理这个问题。引导程序 3.0.0。我已经尝试了所有建议的解决方案，但没有一个解决了我的问题。这让我开始怀疑我是否不小心错过了一些阻碍解决方案发挥作用的基本因素。一个答案有代码来证明这一点，而那个答案也不起作用。

标签： html css checkbox twitter-bootstrap-3 html-table

【解决方案1】：

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

【讨论】：

如果这可以放入.class 或#id 这将是这里的第一个好答案
.classes（或#ids）总是比内联样式更好并推荐
我还建议使用问题中的表结构。

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

【讨论】：

为什么不呢，如果他在课堂上写会更好。只是为了他的澄清，我使用了内联样式；。

【解决方案3】：

在你的 CSS 中试试这个

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

【讨论】：

这仅在元素（及其父元素）是某种显示类型时才有效 - see here
@Martin 我在另一个问题上找到了答案。 margin: 0 auto 是其中的一部分，但没有自行修复。谢谢你的帮助。

【解决方案4】：

我正在为这个简单的引导表工作

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

【讨论】：

【解决方案5】：

试试这个 CSS

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

【讨论】：

你好。我已经格式化了你的答案，请看一下如何格式化code 显示。干杯

【解决方案6】：

这对我有用。感谢所有回答的人，如果没有你们这些了不起的人，这个社区就不会是现在的样子。

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

功劳归于这个人。 https://stackoverflow.com/a/20042250/4526963

【讨论】：