Question

如何在此上下文中垂直居中glyphicon（和badge）元素：

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

多行内容是指不同数量的行，在某些情况下包装文本和各种字体大小。

这是为移动应用提供导航页面，其中包含向右箭头的视觉提示。当内容包装或具有其他多线元素时，垂直居中是其他框架提供的，但它们通常使用背景图像。我正在使用Bootstrap 3.0.0。

Answer 1

这个怎么样..

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

垂直居中一个glyphicon

2 个答案: