Center-align horizontal inline-block list of page numbers

Question

I am trying to center-align a block of page numbers at the bottom of this page. The HMTL and CSS looks like this:

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

If you look on a narrow screen (on the live site), it will be easier to see that the page numbers are very slightly off centre. I've read several articles on here that all make sense but seem to have no further effect on my outcome. It's driving me crazy trying figure out why it's not working. Any help appreciated!

Answer 1

Ah, the art of centering elements in CSS. Good thing we have flexbox to help us all out. This should do the trick:

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