Выровнять по горизонтали горизонтальный список встроенных блоков номеров страниц

Question

Я пытаюсь выровнять по центру блок номеров страниц внизу этой страницы . 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

Ах, искусство центрирования элементов в CSS. Хорошо, что у нас есть flexbox, чтобы помочь нам всем. Это должно сделать трюк:

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

Answer 2

Центрирование выглядит хорошо. Если вы хотите иметь границу для <li>, тогда измените inline из li в inline-block.

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