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.