How to centre list-items in a column

Question

Hey all,

I am trying to centre page numbers at the bottom of this test blog...

http://jocelynwarner.com/test/

in the centre between the previous and next buttons however I cannot think how to do it, I tried a few different tutorials but they didn't really seem to help with this.

Any hints on how to make them sit centrally in the left column (the width of the blog content - sidebar) would be greatly appreciated.

Answer 1

I bother and copy the pagination Div

<div class="pagination">
 <div class="third"></div>
 <div class="third">
  <ul class="page-numbers page-bright current-page-cyan behind-dark fill-gradient shape-  round">
   <li><span class="page-numbers current">1</span></li>
   <li><a href="http://jocelynwarner.com/test/page/2/" class="page-numbers">2</a></li>
   <li><a href="http://jocelynwarner.com/test/page/3/" class="page-numbers">3</a></li>
   <li><a href="http://jocelynwarner.com/test/page/4/" class="page-numbers">4</a></li>
  </ul>
 </div>
 <div class="third">
  <a href="http://jocelynwarner.com/test/page/2/"&gt;
   <p class="next">Next »</p>
  </a>
 </div>
</div>

Here is the new Style that will make it Centered

    .pagination {
      border-top:1px dotted;
      float:left;
      font-size:12px;
      margin-top:10px;
      padding-top:10px;
      text-align:center;
      width:708px;
    }
    .pagination .third {
      display:inline-block;
    }
    ul.page-numbers {
      /*Clear all styles for this*/
    }

I recommend Reading the CSS Reference and tutorials at w3Schools

Answer 2

Pablo has it right. This is a good case where using display:inline-block helps simplify things. By the way, here is a good post about the advantages and disadvantages of using it when you want a horizontal list: CSS display: inline-Block: Why It Rocks, And Why It Sucks

Also, this is kind of unrelated, but according to your description you want the pagination div to be the same size of the content column, right? in this case, you should give the pagination class a width of 548px, the same as your posts class, no?

Answer 3

To expand on Pablo's answer in order to properly support inline-block on all browsers:

.pagination .third {
    /* Supports Firefox < 3.0, note
       that it is not 1:1 identical
       to inline-block but it is
       usually a good substitute */
    display: -moz-inline-box;

    /* Standards support */
    display: inline-block;

    /* IE 6 & 7 do not support
       inline-block for block-
       level elements; fortunately
       inline + hasLayout is exactly
       the same as inline-block in
       these browsers */
    *display: inline;
    *zoom: 1;
}

Answer 4

A combination of these answers solved the problem with some experimentatin. thanks guys.