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

删除margin-top复选框以集中对齐复选框.

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