verticalmente centrare una glyphicon

Question

Come posso centrare verticalmente le glyphicon (e badge) elementi in questo contesto:

<ul class="list-group"> 
    <li class="list-group-item"> 
     Multi-line content... 
     <span class="glyphicon glyphicon-chevron-right pull-right"/> 
    </li> 
    <li class="list-group-item"> 
     Multi-line content... 
     <span class="badge">123</span> 
    </li> 
</ul> 

By contenuti multi-linea intendo un numero variabile di righe e in alcuni casi disposizione del testo e varietà di dimensioni dei caratteri.

Questo è per fornire pagine di navigazione per un'app mobile che include il suggerimento visivo di una freccia sulla destra. Quando il contenuto termina o ha altri elementi a più righe, il centraggio verticale è ciò che forniscono gli altri framework, ma in genere utilizzano le immagini di sfondo. Sto usando Bootstrap 3.0.0.

Answer 1

ne dite di questo ..

.list-group-item span { 
margin-top: -0.5em; 
} 

DEMO: http://bootply.com/95790

Answer 2

<div class="list-group"> 
    <div class="list-group-item"> 
    <div class="media-body"> 
     Multi-line content... 
    </div> 
    <div class="media-right" style="vertical-align:middle;"> 
     <span class="glyphicon glyphicon-chevron-right"></span> 
    </div> 
    </div> 
</div>