Have Geek Brain

How to center list items in a column

I'm trying to center the page numbers at the bottom of this test blog ...

http://jocelynwarner.com/test/

centered between the previous and next buttons, but I can't think of how to do this, I've tried several different tutorials but they didn't really help with this.

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

+2


a source to share


3 answers


Pablo has it right. This is a good case where using it display:inline-block

helps to simplify things. BTW, here's a good post on the pros and cons of using it when you need a horizontal list: CSS rendering: inline-Block: why it chunks and why it sucks



Also, it's kind of unrelated, but as per your description, you want the page separator to be the same size of the content column, right? in this case you must provide a pagination class a width

of 548px

, the same as your posts class, no?

+1


a source


To expand on Pablo's answer to properly support inline-block

across 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;
}
+1


a source


I'm worried and copy the pagination

<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/">
   <p class="next">Next »</p>
  </a>
 </div>
</div>

Here is a 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

0


a source






More articles:


All Articles