Bootstrap 表格单元格中的垂直居中复选框答案

【问题标题】：Vertically center checkbox in Bootstrap table cellBootstrap 表格单元格中的垂直居中复选框
【发布时间】：2013-07-23 17:55:36
【问题描述】：

我想在 Bootstrap 表格单元格中垂直居中一个复选框，这就是我现在拥有的：

<div>
    <table id="mytb" class="table table-hover table-condensed">
        <thead>
            <tr>
                <th style="width: 25%;">A</th>
                <th style="width: 40%">B</th>
                <th style="width: 35%">C</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Blah</td>
                <td>Blah More</td>
                <td class="vcenter"><input type="checkbox" id="blahA" value="1"/></td>
            </tr>
            <tr>
                <td>Blah</td>
                <td>Blah More</td>
                <td class="vcenter"><input type="checkbox" id="blahA" value="1"/></td>
            </tr>
            <tr>
                <td>Blah</td>
                <td>Blah More</td>
                <td class="vcenter"><input type="checkbox" id="blahA" value="1"/></td>
            </tr>
        </tbody>
    </table>
</div>

/* CSS */
td.vcenter {
    vertical-align: middle;
}

此处的示例：http://jsfiddle.net/dRgt2/2/。很明显，复选框位于单元格的下半部分。

请注意，在上面的小提琴中，我已经尝试过这个问题的解决方案：Centering a button vertically in table cell, using Twitter Bootstrap，但它似乎不适用于我的情况。

我正在使用最新的 Bootstrap 2.3.2，如果这有什么不同的话。

【问题讨论】：

标签： html css twitter-bootstrap html-table

【解决方案1】：

移除复选框的顶部边距以使复选框居中对齐。

input[type="radio"], input[type="checkbox"] {
    line-height: normal;
    margin: 0;
}

【讨论】：

【解决方案2】：

简单只需将自定义样式添加到复选框

input[type="checkbox"]{
  margin-top: 0;
  line-height: normal;
}

【讨论】：

【解决方案3】：

这个 Css 为我工作！

tbody 
{
    line-height: 0;
}

.table td, .table th {
    vertical-align: middle !important;
}

td>.custom-control>.custom-control-input[type="checkbox"] 
{
    position: relative !important;
}

【讨论】：