Question

我正在尝试将页码集中在此测试博客的底部......

在上一个按钮和下一个按钮之间的中心，但我想不出怎么做，我尝试了几个不同的教程，但他们似乎没有真正帮助这个。

如何让它们集中在左栏（博客内容的宽度 - 侧边栏）的任何提示都将非常感激。

Answer 1

巴勃罗说得对。这是一个很好的案例，使用display:inline-block有助于简化事情。顺便说一下，当你想要一个水平列表时，这里有一篇关于使用它的优点和缺点的好文章： CSS display: inline-Block: Why It Rocks, And Why It Sucks

此外，这有点无关，但根据您的描述，您希望分页div与内容列的大小相同，对吧？在这种情况下，您应该为分页类提供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参考和教程

如何将列中的列表项居中

3 个答案: