Html Bootstrap 表格单元格中的垂直居中复选框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17830927/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Vertically center checkbox in Bootstrap table cell
提问by skyork
I want to vertically center a checkbox inside a Bootstrap table cell, and this is what I have now:
我想在 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;
}
Example here: http://jsfiddle.net/dRgt2/2/. It is clear that the checkbox is positioned towards the lower half of the cell.
这里的例子：http: //jsfiddle.net/dRgt2/2/。很明显，复选框位于单元格的下半部分。
Notice that in the fiddle above, I've already tried the solution in this question: Centering a button vertically in table cell, using Twitter Bootstrap, but it doesn't seem to work in my case.
请注意，在上面的小提琴中，我已经尝试过这个问题的解决方案：使用 Twitter Bootstrap 在表格单元格中垂直居中按钮，但它似乎不适用于我的情况。
I'm using the latest Bootstrap 2.3.2, if that makes a difference.
我正在使用最新的 Bootstrap 2.3.2，如果这有区别的话。
回答by web2008
Remove margin-top for check box to align the check box centrally.
删除复选框的顶部边距以将复选框居中对齐。
input[type="radio"], input[type="checkbox"] {
line-height: normal;
margin: 0;
}
回答by Chandrakant
Simple Just add custom style to checkbox
简单只需将自定义样式添加到复选框
input[type="checkbox"]{
margin-top: 0;
line-height: normal;
}
回答by Arash.Zandi
This Css Worked For Me !
这个 CSS 对我有用！
tbody
{
line-height: 0;
}
.table td, .table th {
vertical-align: middle !important;
}
td>.custom-control>.custom-control-input[type="checkbox"]
{
position: relative !important;
}
