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

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中更改li的inline-block。

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

Answer 2

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

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