html - Bootstrap 表格单元格中的垂直居中复选框

Question

我想在 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/。很明显，复选框位于单元格的下半部分。

请注意，在上面的小提琴中，我已经尝试了这个问题的解决方案：使用 Twitter Bootstrap 在表格单元格中垂直居中按钮，但它似乎不适用于我的情况。

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

Answer 1

Remove margin-top for check box to align the check box centrally.

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

Answer 2

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

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

Answer 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;
}