使用 Bootstrap 垂直对齐 btn-group 内的标签答案

【问题标题】：Vertical align a label inside btn-group using Bootstrap使用 Bootstrap 垂直对齐 btn-group 内的标签
【发布时间】：2016-12-13 05:12:24
【问题描述】：

我在水平表单中有 2 个inline elements，我无法垂直对齐标签。有没有不使用 display:table 之类的技巧的干净方法？

这是我目前尝试的代码：bootply

【问题讨论】：

【解决方案1】：

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

新的CSS：

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

由于 .btn-group 的高度为 35px，因此您也将行高设为 35px。

【讨论】：

【解决方案2】：

使用新的 CSS3 Flexbox 显示属性。

这很简单，并且在每种情况下都工作完美。

.btn-group{
   ....
   display:inline-flex;
   justify-content:center;
}

.btn-group label{
   ....
   align-self:center;
   margin-bottom:0px;
}

【讨论】：