如何设置标签和btn-group Bootstrap的垂直中心

Question

如何将其他元素与引导程序btn-group对齐？

<div class="btn-toolbar text-center">
    <div class="pull-left">
        <span class="glyphicon glyphicon-envelope " style="font-size:1.5em;"></span>
        <label>Title</label>
    </div>
    <div class="btn-group btn-group-sm pull-right">
        <a href="#" title="Open" class="btn btn-default clear-filter"><span class="glyphicon glyphicon-open"></span></a>
        <a href="#" title="Print" class="btn btn-default clear-filter"><span class="glyphicon glyphicon-print"></span></a>
        <a href="#" title="Edit" class="btn btn-default clear-filter"><span class="glyphicon glyphicon-edit"></span></a>
    </div>
</div>

这看起来如何，我希望文本和图标是内联的。

修改

现在文字与按钮内联，但图标不是

。

<div class="pull-left">
    <span class="glyphicon glyphicon-envelope " style="line-height: 30px; font-size: 1.5em; vertical-align: middle;"></span>
    <label style="line-height:30px;">Title</label>
</div>

Answer 1

请试试这个：

.glyphicon {
  position: relative;
  top: -1px;
  display: inline-block;
  font-family: 'Glyphicons Halflings';
  -webkit-font-smoothing: antialiased;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  vertical-align: middle;
}

Answer 2

尝试此操作。在标签上添加跨度可以通过对齐标签和glyphicon来解决大部分问题。我想这就是你想要的。

<div class="btn-toolbar text-center">
    <div class="pull-left">
        <span class="glyphicon glyphicon-envelope " style="line-height: 30px; font-size: 1.5em; vertical-align: middle;"></span>
        <span style="line-height: 30px; font-size: 1.5em; vertical-align: middle;"><label>Title</label></span>
    </div>
    <div class="btn-group btn-group-sm pull-right">
        <a href="#" title="Open" class="btn btn-default clear-filter"><span class="glyphicon glyphicon-open"></span></a>
        <a href="#" title="Print" class="btn btn-default clear-filter"><span class="glyphicon glyphicon-print"></span></a>
        <a href="#" title="Edit" class="btn btn-default clear-filter"><span class="glyphicon glyphicon-edit"></span></a>
    </div>
</div>

我还创建了一个jsfiddle。