页码居中对齐水平内联块列表

Question

我正在尝试将 this page 底部的页码块居中对齐。 HMTL 和 CSS 看起来像这样：

.pt-cv-pagination-wrapper {
 position: relative;
 display: block;
 text-align: center;
 margin: 20px 0;
 padding: 0;
 }

.pt-cv-pagination {
 position: static;
 display: inline-block;
 text-align: center;
 margin: 20px 0;
 padding: 0;
 }

li {
 position: relative;
 display: inline;
 text-align: center;
 margin: 0;
 padding: 0;
 }

.pt-cv-pagination a {
 position: relative;
 display: block;
 float: left;
 padding: 6px 12px;
 margin: 1em;
 }

    <div class="pt-cv-pagination-wrapper">
 <ul class="pt-cv-pagination pt-cv-ajax pagination" data-totalpages="3" data-currentpage="1" data-sid="98f4b5c3fg" data-unid="">
  <li class="cv-pageitem-prev">
   <a title="Go to previous page">‹</a>
  </li>
  <li class="cv-pageitem-number">
   <a title="Go to page 1">1</a>
  </li>
  <li class="cv-pageitem-number">
   <a title="Go to page 2">2</a>
  </li>
  <li class="cv-pageitem-number active">
   <a title="Current page is 3">3</a>
  </li>
  <li class="cv-pageitem-next active">
   <a title="Go to next page">›</a>
  </li>
 </ul>
<div class="clear pt-cv-clear-pagination"></div>
</div>

如果您在窄屏幕上（在实时网站上）看，会更容易看出页码稍微偏离中心。我在这里读了几篇文章，它们都很有道理，但似乎对我的结果没有进一步的影响。试图弄清楚为什么它不起作用，这让我发疯。感谢任何帮助！

Answer 1

居中看起来不错。如果您想在 <li> 上添加边框，请在 inline-block.

中更改 li 的 inline

.pt-cv-pagination li {
    position: relative;
    display: inline-block;
    text-align: center;
    margin: 0;
    padding: 0;
    }

从 <a> 中删除浮动以使此锚上的块以正确的方式工作。

.pt-cv-pagination a {
    position: relative;
    display: block;
    padding: 6px 12px;
    margin: 1em;
    }

Answer 2

啊，在 CSS 中居中元素的艺术。幸好我们有 flexbox 来帮助我们。这应该可以解决问题：

.pt-cv-pagination-wrapper .pt-cv-pagination.pagination {
  display: flex;
  justify-content: center;
}

页码居中对齐水平内联块列表

Center-align horizontal inline-block list of page numbers

css

pagination

text-align

centering