Vertically centering a glyphicon

twitter-bootstrap-3

Solution

How about this..

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

DEMO: http://bootply.com/95790

Problem

How can I vertically center the `glyphicon` (and `badge`) elements 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> ``` By multi-line content I mean a varying number of lines and in some cases wrapping text and a variety of font sizes. This is to provide navigation pages for a mobile app that include the visual hint of an arrow over to the right. When the content wraps or has other multi-line elements vertical centering is what other frameworks provide but they typically use background images. I am using Bootstrap 3.0.0.

Original source