Vertically center checkbox in Bootstrap table cell

Question

I want to vertically center a checkbox inside a Bootstrap table cell, and this is what I have now:

<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.

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.

I'm using the latest Bootstrap 2.3.2, if that makes a difference.

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

Simple Just add custom style to checkbox

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

Answer 3

This Css Worked For Me !

tbody 
{
    line-height: 0;
}

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

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