html - 如何使列中的列表项居中

Question

我试图在这个测试博客的底部居中页码......

http://jocelynwarner.com/test/

在上一个和下一个按钮之间的中心但是我不知道该怎么做，我尝试了一些不同的教程，但它们似乎并没有真正帮助解决这个问题。

任何关于如何使它们位于左列中心的提示（博客内容的宽度 - 侧边栏）将不胜感激。

Answer 1

巴勃罗说得对。这是一个很好的例子，使用display:inline-block有助于简化事情。顺便说一句，这里有一篇很好的文章，介绍了在需要水平列表时使用它的优缺点： CSS display: inline-Block: Why It Rocks, and Why It Sucks

另外，这有点不相关，但是根据您的描述，您希望分页 div 与内容列的大小相同，对吗？在这种情况下，你应该给分页类 a width，548px和你的帖子类一样，不是吗？

Answer 2

要扩展 Pablo 的答案以正确支持inline-block所有浏览器：

.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 3

我打扰并复制分页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/">
   <p class="next">Next »</p>
  </a>
 </div>
</div>

这是使其居中的新样式

    .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*/
    }

我建议阅读w3Schools上的 CSS 参考和教程