0

I see that this question has been asked a million times before, but these solutions so far have not worked for me

How can I center my ul li list in css?

CSS center ul list

I am using a very old version of angular

this is my 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;
}

and the corresponding 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>

In the browser that looks like this

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

The only solution I've been able to come up with is use margin on the right hand side until it's pushed to the center, which obviously isn't ideal. Are there any other suggestions?

sf8193
  • 575
  • 1
  • 6
  • 25

1 Answers1

3

Have you tried using 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>
Smokey Dawson
  • 8,827
  • 19
  • 77
  • 152
  • yes, this also does not work, it still sits on the left handside – sf8193 Jan 23 '20 at 20:25
  • I stand corrected, this works when I do exactly how you did it, but not when I do ```.pagination-sm ul { width: 100%; display: flex; justify-content: center; align-items: center; list-style: none; margin: 0; padding: 0; }``` why is this? – sf8193 Jan 23 '20 at 20:38
  • Works like a charm for me! Thanks! – Kawu Apr 08 '21 at 13:54