simplePagination.jsを利用して表示させたボタンを中央寄せをしたい

Question

jQueryプラグインの「simplePagination.js」を使って、表示させたページ遷移させるボタンを中央寄せ（横方向のみ）させたいのですができません。

  <p class="selection" id="page1">one</p>
  <p class="selection" id="page2">Two</p>
  <p class="selection" id="page3">Three</p>
  <p class="selection" id="page4">Four</p>
  <div id="paging"></div>

$(function() {
    const a=document.getElementsByClassName('selection');
    $("#paging").pagination({
        itemElement : '> .item',
        items: 8,
        itemsOnPage: 1,
        cssStyle: 'light-theme',
        onPageClick: function(pageNumber){show(pageNumber)}
    });
    function show(pageNumber){
      var page="#page"+pageNumber;
      $('.selection').hide()
      $(page).show()
    }
  });

.selection {display: none;}
#page1 { display: block;}
#paging{
  display: inline;
  margin:0 auto;
  }

実行結果はこんな感じです。

試したこと
displayをinlineなどを試した。

Comments

[m.ts10806]

同じIDが同ページにあるように見えますがそこの問題はないでしょうか。

[mayo1024]

エラーメッセージが出ていなくて気が付きませんでした。ありがとうございます。
消しておきました。

[m.ts10806]

エラーメッセージは出ません。あくまでJavaScriptから正しく操作できないだけです。
なおってないようですが・・・

<p class="selection" id="page2">Two</p> ←
<p class="selection" id="page1">one</p>
<p class="selection" id="page2">Two</p> ←
<p class="selection" id="page3">Three</p>
<p class="selection" id="page4">Four</p>

[mayo1024]

はい。そこを消しておきました。
投稿にどうやって反映させるかが分からないです

Answer 1

試していませんが、

#paging ul{
	margin: 0 auto;
	width: max-content;
}

とすると、どうでしょうか。

Comments

[mayo1024]

中央寄せにすることができました。ありがとうございます。