垂直对齐复选框到引导程序中按钮的中心

Question

我正在尝试将复选框垂直居中对齐按钮，但它无法正常工作

我现在拥有的内容：

预期：（约5 px下降）

我尝试了什么：

尝试为复选框添加顶部填充/边距但不起作用。

以下是代码......

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

HTML：

receiverDelegate

任何建议都表示赞赏。

Answer 1

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

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

Fiddle

Answer 2

将此内容添加到您的代码中这里是fiddle

input, button{vertical-align:middle;}

Answer 3

您必须在复选框上使用负边距，如下所示：

input[type=checkbox], input[type=radio] {
    margin:-2px 0 0px 0; /* <-- here */
    padding: 0;
    vertical-align: middle;
}

这里有一个上面代码的jsfiddle：https://jsfiddle.net/z4b2bwg6/15/

  

来源：How to center checkbox vertically in a table-cell?

Answer 4

尝试以下代码，

.checkboxContainer{display:table}
.checkboxContainer input[type="checkbox"]{
    display: table-cell;
    vertical-align: middle;
    margin: 0;
}

https://jsfiddle.net/z4b2bwg6/17/