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

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;
}