title: How to center a horizontal list in css
body: <p>I see that this question has been asked a million times before, but these solutions so far have not worked for me</p>
  
  <p><a href="https://stackoverflow.com/questions/30829916/how-can-i-center-my-ul-li-list-in-css">How can I center my ul li list in css?</a></p>
  
  <p><a href="https://stackoverflow.com/questions/21172989/css-center-ul-list">CSS center ul list</a></p>
  
  <p>I am using a very old version of angular</p>
  
  <p>this is my css</p>
  
  <pre><code>.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;
  }
  </code></pre>
  
  <p>and the corresponding html</p>
  
  <pre><code>&lt;footer class="footer"&gt;
      &lt;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"&gt;&lt;/pagination&gt;
  &lt;/footer&gt;
  
  </code></pre>
  
  <p>In the browser that looks like this</p>
  
  <pre><code>&lt;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)"&gt;
    &lt;!-- ngRepeat: page in pages --&gt;&lt;li ng-repeat="page in pages" ng-class="{active: page.active, disabled: page.disabled}" class="ng-scope disabled"&gt;&lt;a ng-click="selectPage(page.number)" class="ng-binding"&gt;Previous&lt;/a&gt;&lt;/li&gt;
  
  &lt;!-- end ngRepeat: page in pages --&gt;
  &lt;li ng-repeat="page in pages" ng-class="{active: page.active, disabled: page.disabled}" class="ng-scope active"&gt;&lt;a ng-click="selectPage(page.number)" class="ng-binding"&gt;1&lt;/a&gt;&lt;/li&gt;
  
  &lt;!-- end ngRepeat: page in pages --&gt;
  &lt;li ng-repeat="page in pages" ng-class="{active: page.active, disabled: page.disabled}" class="ng-scope"&gt;&lt;a ng-click="selectPage(page.number)" class="ng-binding"&gt;2&lt;/a&gt;&lt;/li&gt;&lt;!-- end ngRepeat: page in pages --&gt;&lt;li ng-repeat="page in pages" ng-class="{active: page.active, disabled: page.disabled}" class="ng-scope"&gt;&lt;a ng-click="selectPage(page.number)" class="ng-binding"&gt;3&lt;/a&gt;&lt;/li&gt;
  
  &lt;!-- end ngRepeat: page in pages --&gt;
  &lt;li ng-repeat="page in pages" ng-class="{active: page.active, disabled: page.disabled}" class="ng-scope"&gt;&lt;a ng-click="selectPage(page.number)" class="ng-binding"&gt;4&lt;/a&gt;&lt;/li&gt;
  
  &lt;!-- end ngRepeat: page in pages --&gt;&lt;li ng-repeat="page in pages" ng-class="{active: page.active, disabled: page.disabled}" class="ng-scope"&gt;
  &lt;a ng-click="selectPage(page.number)" class="ng-binding"&gt;5&lt;/a&gt;&lt;/li&gt;
  
  &lt;!-- end ngRepeat: page in pages --&gt;
  
  &lt;li ng-repeat="page in pages" ng-class="{active: page.active, disabled: page.disabled}" class="ng-scope"&gt;&lt;a ng-click="selectPage(page.number)" class="ng-binding"&gt;Next&lt;/a&gt;&lt;/li&gt;&lt;!-- end ngRepeat: page in pages --&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>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?</p>