css - Bootstrap 3 垂直对齐 btn-group 的文本

Question

如何垂直对齐带有 float 的自定义按钮组的标签？

<div class="col-md-12">
  <div class="btn-group pull-right" role="group" aria-label="Sort By">
    <button class="btn btn-default btn-sm">Friends</button>
    <button class="btn btn-default btn-sm">Distance</button>
  </div>
  <div class="pull-right">
    <div>Sort By:</div>
  </div>
</div>

我尝试了 vertical-align: middle 但没有成功

JSFiddle

Answer 1

您可以使用 line-height 完成此操作。

.btn-group + .pull-right div {
    line-height:2em;
}