Вертикально центрирования glyphicon

Как я могу вертикально центрировать glyphicon (и badge) элементы в этом контексте:Вертикально центрирования glyphicon

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

источник

2013-11-21 Keith C

Как об этом ..

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

DEMO: http://bootply.com/95790

источник

2013-11-21 14:56:06 ZimSystem

Я должен был быть более четким. По многострочному я имел в виду неизвестное количество строк и различные размеры шрифта, поэтому фиксированные смещения не будут делать этого. Я улучшу вопрос. –

Я только что добавил это к классу пролета - работал красиво! –

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

источник

2015-11-21 22:48:13 Collegeman

Вы должны объяснить, почему это решение заданного вопроса. –

Вертикально центрирования glyphicon

ответ

Смежные вопросы