Wie vertikale Mitte von Label und Btn-Gruppe Bootstrap

Question

So richten Sie andere Elemente mit Bootstrap 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> 

So sieht das aus, ich möchte Text und Icon inline sein.

EDIT:

Nun Text ist inline mit den Tasten, sondern Symbol nicht.

<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

Bitte versuchen Sie dies:

.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

Versuchen Sie, eine Spanne zu Ihrem Label this.Adding löst die meisten des Problems durch Etiketten- und glyphicon ausrichten. Ich nehme an, das ist was du wolltest.

<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> 

Ich habe auch eine jsfiddle erstellt.