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

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

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

Answer 1

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

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

Bootstrap表格单元格中的垂直中心复选框

3 个答案: