html - 将复选框垂直对齐到 Bootstrap 中的按钮中心

Question

我试图将复选框垂直居中对齐到按钮，但它不起作用

我现在拥有的:

预期:(向下约 5 像素)

我尝试了什么:

尝试为复选框添加顶部填充/边距但没有成功。

这是代码...

https://jsfiddle.net/z4b2bwg6/13/

HTML:

<table class="table table-bordered table-condensed">
    <thead>
        <tr class="info">
            <th class="col-md-2"><input type="checkbox" class="app-all"/>&nbsp<button type="button" class="btn btn-primary btn-xs">Modify</button></th>                               
            <th class="col-md-1 text-center">Comments</th>
        </tr>
    </thead>
    <tbody id="Container" data-filteredresult=""></tbody>
</table>

如有任何建议，我们将不胜感激。

Answer 1

使用 vertical-align:middle 并移除正在设置的 margin-top。

input[type=checkbox] {
    margin-top: 0;
    vertical-align: middle;
}

Fiddle