Вертикально центр флажок в 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/. Понятно, что флажок расположен в нижней половине ячейки.

Обратите внимание, что в приведенной выше скрипте я уже пробовал решение в этом вопросе: Centering a button vertically in table cell, using Twitter Bootstrap, но он не работает в моем случае.

Я использую последнюю версию Bootstrap 2.3.2, если это имеет значение.

Answer 1

Удалить Верхнее поле для флажка, чтобы выровнять флажок централизованно.

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

Answer 2

Простой Просто добавьте пользовательский стиль CheckBox

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