将复选框与td内的文本对齐

Question

我知道这个问题有几次得到解答，但我似乎找不到一个没有使用<label>作为其复选框标签的帖子

我想在<td>内对齐文字和复选框，而不使用<label>。这是我的表结构

<table class="table table-bordered table-hover">
    <thead>
        <tr>
            <th> test </th>
            <th> beng </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td> broom </td>
            <td class="tdClass">
                <input type="checkbox" value="0" class="benefits"> test
            </td>
        </tr>
    </tbody>
</table>

我尝试使用CSS来对齐它们

td.test {
    text-align: center;
    vertical-align: middle !important;
}

但它不起作用。有什么想法吗？

这是一个实时demo

如果它是相关的我也在使用bootstrap

Answer 1

您可以使用

input[type="checkbox"] {
    vertical-align: top;
}

Fiddle