Glyphicon Vertical Centering

Question

How can I vertically center glyphicon elements (and badge ) in this context:

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

For multi-line content, I mean a different number of lines and, in some cases, text wrapping and different font sizes.

This is a navigation page for a mobile application that contains a visual hint of the arrow to the right. When content wraps or has vertical centering for other multi-line elements, this is what other environments provide, but usually use background images. I am using Bootstrap 3.0.0.

Answer 1

How about this ..

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