Bootstrap Align Label to Pagination

Question

У меня есть элемент разбиения на страницы, чтобы перейти на предыдущую/следующую страницу. Я бы хотел показать ярлык прямо перед ним, чтобы показать текущие и итоговые значения элементов. Например:

1 - 30 из 2.950[ < Prev ][ Next > ]

Я не уверен, как получить правильное выравнивание. У меня также есть другие кнопки/ярлыки в одной строке и хотелось бы, чтобы все выровнялись по середине. Вот скриншот, что я получаю.

И, как я хочу, чтобы она появилась.

plunkr с кодом, демонстрирующего вопрос:

http://plnkr.co/edit/SaYpq1ov4MPBCGcAUQVt?p=preview

Вот HTML я использую.

<div ng-cloak class="ng-cloak row" style="margin-bottom: 2em;"> 
    <span style="margin-right: 2em;"> 
     <span class="small" style="margin-right: 0.5em;">Folder</span> 
     <div class="btn-group">  
      <button type="button" class="btn btn-default">Sent</button> 
      <button type="button" class="btn btn-default">Outbox</button> 
     </div>  
    </span> 
    ... other buttons and labels are the same layout ... 
    <div class="pull-right">   
     <span class="small" style="margin-right: 0.5em;"> 
      <strong>1 - 30</strong> of <strong>255</strong> 
     </span> 
     <ul class="pagination" style="margin: 0px !important;">   
      <li><a>&laquo;</a></li> 
      <li><a>&raquo;</a></li> 
     </ul>  
    </div> 
</div> 

Answer 1

Набор vertical-align: middle; в <ul class="pagination"> элемента:

<ul class="pagination" style="margin: 0px !important; vertical-align: middle;">