Place centered text between navigation buttons from Twitter Bootstrap

Question

Twitter Bootstrap aligns the 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> header that is above these navigation links (top)

I want to place this name between these buttons (Bottom). How can I do this while keeping the navigation buttons aligned?

Answer 1

Try the following: 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; }