Seeking assistance with aligning a pagination element alongside other buttons and labels within the same row. I would like to have a label displaying current and total item counts right before the pagination elements, ensuring that everything is middle-aligned. Here is an example of the desired layout:
1 - 30 of 2,950 [ < Prev ] [ Next > ]
I am unsure of how to achieve the correct alignment and have included a screenshot of the current output versus the expected appearance.
Please check out this Plunkr link for a demonstration of the issue: http://plnkr.co/edit/SaYpq1ov4MPBCGcAUQVt?p=preview
Below is the HTML code snippet in question:
<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>
... additional buttons and labels follow 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>«</a></li>
<li><a>»</a></li>
</ul>
</div>
</div>