使用Bootstrap在btn组内垂直对齐标签

Question

我在水平表单中有两个inline elements，无法垂直对齐标签。有没有一种干净的方法可以做到这一点，而不使用display:table之类的技巧？

以下是我迄今为止尝试的代码：bootply

Answer 1

将行高css添加到标签中，并将其与按钮的高度匹配

新css：

.btn-group label{
   line-height: 35px;
}

由于.btn组的高度是35px，所以您也可以将行的高度设为35px。

Answer 2

使用新的CSS3 Flexbox显示属性。

这很简单，在任何场景中都能完美工作。

.btn-group{
   ....
   display:inline-flex;
   justify-content:center;
}
.btn-group label{
   ....
   align-self:center;
   margin-bottom:0px;
}