Как центрировать горизонтальный список в css

Question

Я вижу, что этот вопрос задавался миллион раз раньше, но эти решения до сих пор не работали для меня

Как я могу расположить свой список адресов в css?

CSS center ul list

Я использую очень старую версию angular

это мой css

.pagination-sm {
    margin-top:20px;
    text-align: center;
}

.pagination-sm a {
    cursor: pointer;
}

.pagination-sm ul {
    text-align: center;
}

.pagination-sm li a:hover {
    background-color: #4cd94a;
}

.pagination-sm li {
    display: inline-block;
    color: black;
    border: 1px solid;

}

.pagination-sm a {
    margin: 0 5px 0 5px;
}

и соответствующие html

<footer class="footer">
    <pagination total-items="totalItems" page="currentPage" items-per-page="itemsPerPage" max-size = "maxSize" rotate="false" num-pages="numPages" on-select-page="pageChanged(page)" class="pagination-sm"></pagination>
</footer>

В браузере, который выглядит следующим образом

<ul class="pagination-sm pagination ng-isolate-scope" total-items="totalItems" page="currentPage" items-per-page="itemsPerPage" max-size="maxSize" rotate="false" num-pages="numPages" on-select-page="pageChanged(page)">
  <!-- ngRepeat: page in pages --><li ng-repeat="page in pages" ng-class="{active: page.active, disabled: page.disabled}" class="ng-scope disabled"><a ng-click="selectPage(page.number)" class="ng-binding">Previous</a></li>

<!-- end ngRepeat: page in pages -->
<li ng-repeat="page in pages" ng-class="{active: page.active, disabled: page.disabled}" class="ng-scope active"><a ng-click="selectPage(page.number)" class="ng-binding">1</a></li>

<!-- end ngRepeat: page in pages -->
<li ng-repeat="page in pages" ng-class="{active: page.active, disabled: page.disabled}" class="ng-scope"><a ng-click="selectPage(page.number)" class="ng-binding">2</a></li><!-- end ngRepeat: page in pages --><li ng-repeat="page in pages" ng-class="{active: page.active, disabled: page.disabled}" class="ng-scope"><a ng-click="selectPage(page.number)" class="ng-binding">3</a></li>

<!-- end ngRepeat: page in pages -->
<li ng-repeat="page in pages" ng-class="{active: page.active, disabled: page.disabled}" class="ng-scope"><a ng-click="selectPage(page.number)" class="ng-binding">4</a></li>

<!-- end ngRepeat: page in pages --><li ng-repeat="page in pages" ng-class="{active: page.active, disabled: page.disabled}" class="ng-scope">
<a ng-click="selectPage(page.number)" class="ng-binding">5</a></li>

<!-- end ngRepeat: page in pages -->

<li ng-repeat="page in pages" ng-class="{active: page.active, disabled: page.disabled}" class="ng-scope"><a ng-click="selectPage(page.number)" class="ng-binding">Next</a></li><!-- end ngRepeat: page in pages -->
</ul>

Единственное решение, которое мне удалось найти используйте поле справа, пока оно не сдвинется к центру, что явно не идеально. Есть ли другие предложения?

Answer 1

Вы пробовали использовать flexbox?

ul {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

li {
  margin: 0 20px;
}

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>