CODEWITHSUNDEEP
twitter-bootstrap-3
Keith C
Keith C

Reputation: 612

Vertically centering a glyphicon

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.

Upvotes: 8

Views: 6687

Answers (2)

Collegeman
Collegeman

Reputation: 71

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

Upvotes: 3

Carol Skelly
Carol Skelly

Reputation: 362610

How about this..

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

DEMO: http://bootply.com/95790

Upvotes: 4

Related Questions