Bootstrap将标签对齐分页

时间:2015-03-06 17:11:43

标签: css twitter-bootstrap-3

我有一个分页元素移动到上一页/下一页。我想在它之前显示一个标签,以显示当前和总项目数。例如:

1 - 30 2,950 [ < Prev ] [ Next > ]

我不确定如何正确对齐。我还有其他按钮/标签在同一行,并希望所有中间对齐。这是我得到的截图。

enter image description here

而且,我希望它如何出现。

enter image description here

带有代码证明问题的傻瓜:

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>

1 个答案:

答案 0 :(得分:6)

vertical-align: middle;元素中设置<ul class="pagination">

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