Place centered text between navigation buttons from Twitter Bootstrap

Question

Twitter Bootstrap has aligned navigation buttons that are placed on both sides of the page.

<ul class="pager">
  <li class="previous">
    <a href="#">Previous</a>
  </li>
  <li class="next">
    <a href="#">Next</a>
  </li>
</ul>

I have a <h3> title that is above those navigation links (Top)

I want to place this title between those buttons (Bottom). How can I do this, preserving the navigation buttons alignment?

Answer 1

Try this:- http://jsfiddle.net/Z2hH2/

<ul class="pager">
  <li class="previous">
    <a href="#">Previous</a>
  </li>
    <li >
        <h3 class="fillSpace">Title goes here</h3>
    </li>
  <li class="next">
    <a href="#">Next</a>
  </li>
</ul>

h3.fillSpace
{
   display:inline-block;
   margin:0;
}

or:-

h3.fillSpace
{
position: absolute; top:  0; right: 0; left: 0;
}