title: centering ul within div
body: <p>I'm struggling with getting a <code>&lt;ul</code>> containing pagination links centered within it's parent <code>div</code>. I'm not certain that a <code>&lt;ul&gt;</code> is the best way to handle this, but was the only way I could think of to display the links horizontally within <code>&lt;div class="pagination"&gt;</code> (floats didn't seem to work.).</p>
  
  <p>html/php</p>
  
  <pre><code>&lt;div class="pagination"&gt;    
          &lt;ul&gt;
              &lt;li&gt;&lt;?php previous_post_link('&lt;span class="left-arrow"&gt;&lt;/span&gt; older posts'); ?&gt;&lt;/li&gt;
              &lt;li&gt;&lt;?php next_post_link('&lt;span class="right-arrow"&gt;&lt;/span&gt; newer posts'); ?&gt;&lt;/li&gt;
          &lt;/ul&gt;            
      &lt;/div&gt;&lt;!-- end pagination --&gt;
  </code></pre>
  
  <p>css</p>
  
  <pre><code>#blog .pagination {
      background: url('img/arrow_left.png') no-repeat;
      height: 169px;
      width: 635px;
      float: right;
      margin-right: 14px;
      padding-bottom: 20px;
  }
  
  #blog .pagination ul li {
      display: inline;
      margin: 0 auto;
      width: 290px;
  }
  
  #blog .pagination .left-arrow {
      float: left;
      background: url('arrow_left.png') no-repeat;
  }
  
  #blog .pagination .right-arrow {
      padding-left: 50px;
      background: url('arrow_right.png') no-repeat;
  }
  </code></pre>
  
  <p><a href="http://blog.christaandivy.com/" rel="nofollow">live site</a></p>