title: Centering the pagination div
body: <p>Normally the pagination looks like this:</p>
  
  <p><img src="https://i.stack.imgur.com/MqTSK.png" alt="enter image description here"></p>
  
  <p>When I will add something like:</p>
  
  <p><code>&lt;td align="center"&gt;</code>
  or <code>&lt;center&gt;&lt;div id="pagination&gt;&lt;/div&gt;&lt;/center&gt;</code></p>
  
  <p>It looks like this:</p>
  
  <p><img src="https://i.stack.imgur.com/THehA.png" alt="enter image description here"></p>
  
  <p>I've tried also to use <code>style="margin: 0px auto;"</code> but it not work.</p>
  
  <p>Here is the code:</p>
  
  <pre><code>&lt;table&gt;
      &lt;tr&gt;
          &lt;td align="center"&gt;
              &lt;div id="pagination"&gt;&lt;/div&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>Yes, I've also tried to use this attributes on the div (including <code>text-align: center;</code>).</p>
  
  <p>CSS Part:</p>
  
  <pre><code>.jPaginate{
      height:34px;
      position:relative;
      color:#a5a5a5;
      font-size:small;   
      width:100%;
  }
  .jPaginate a{
      line-height:15px;
      height:18px;
      cursor:pointer;
      padding:2px 5px;
      margin:2px;
      float:left;
  }
  .jPag-control-back{
      position:absolute;
      left:0px;
  }
  .jPag-control-front{
      position:absolute;
      top:0px;
  }
  .jPaginate span{
      cursor:pointer;
  }
  ul.jPag-pages{
      float:left;
      list-style-type:none;
      margin:0px 0px 0px 0px;
      padding:0px;
  }
  ul.jPag-pages li{
      display:inline;
      float:left;
      padding:0px;
      margin:0px;
  }
  ul.jPag-pages li a{
      float:left;
      padding:2px 5px;
  }
  span.jPag-current{
      cursor:default;
      font-weight:normal;
      line-height:15px;
      height:18px;
      padding:2px 5px;
      margin:2px;
      float:left;
  }
  ul.jPag-pages li span.jPag-previous,
  ul.jPag-pages li span.jPag-next,
  span.jPag-sprevious,
  span.jPag-snext,
  ul.jPag-pages li span.jPag-previous-img,
  ul.jPag-pages li span.jPag-next-img,
  span.jPag-sprevious-img,
  span.jPag-snext-img{
      height:22px;
      margin:2px;
      float:left;
      line-height:18px;
  }
  
  ul.jPag-pages li span.jPag-previous,
  ul.jPag-pages li span.jPag-previous-img{
      margin:2px 0px 2px 2px;
      font-size:12px;
      font-weight:bold;
          width:10px;
  
  }
  ul.jPag-pages li span.jPag-next,
  ul.jPag-pages li span.jPag-next-img{
      margin:2px 2px 2px 0px;
      font-size:12px;
      font-weight:bold;
      width:10px;
  }
  span.jPag-sprevious,
  span.jPag-sprevious-img{
      margin:2px 0px 2px 2px;
      font-size:18px;
      width:15px;
      text-align:right;
  }
  span.jPag-snext,
  span.jPag-snext-img{
      margin:2px 2px 2px 0px;
      font-size:18px;
      width:15px;
       text-align:right;
  }
  </code></pre>
  
  <p>This is the HTML output from the Firebug:</p>
  
  <pre><code>&lt;div id="pagination" class="jPaginate" style="padding-left: 71px; "&gt;
              &lt;div class="jPag-control-back"&gt;
                  &lt;a class="jPag-first" style="color: rgb(255, 0, 0); background-color: rgb(212,                   192, 161); border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px;   border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(98, 36, 0); border-right-color: rgb(98, 36, 0); border-bottom-color: rgb(98, 36, 0); border-left-color: rgb(98, 36, 0); "&gt;First&lt;/a&gt;
                  &lt;span class="jPag-sprevious"&gt;«&lt;/span&gt;
             &lt;/div&gt;
             &lt;div style="overflow-x: hidden; overflow-y: hidden; width: 101px; "&gt;
                 &lt;ul class="jPag-pages" style="width: 99px; "&gt;
                    &lt;li&gt;&lt;a style="color: rgb(255, 0, 0); background-color: rgb(212, 192, 161); border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(98, 36, 0); border-right-color: rgb(98, 36, 0); border-bottom-color: rgb(98, 36, 0); border-left-color: rgb(98, 36, 0); "&gt;1&lt;/a&gt;
                    &lt;/li&gt;
                    &lt;li&gt;
                       &lt;span class="jPag-current" style="color: rgb(0, 99, 220); background-color: rgb(241, 224, 198); border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(141, 4, 4); border-right-color: rgb(141, 4, 4); border-bottom-color: rgb(141, 4, 4); border-left-color: rgb(141, 4, 4); "&gt;2&lt;/span&gt;
                    &lt;/li&gt;
                    &lt;li&gt;
                       &lt;a style="color: rgb(255, 0, 0); background-color: rgb(212, 192, 161); border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(98, 36, 0); border-right-color: rgb(98, 36, 0); border-bottom-color: rgb(98, 36, 0); border-left-color: rgb(98, 36, 0); "&gt;3&lt;/a&gt;
                    &lt;/li&gt;
                    &lt;li&gt;&lt;a style="color: rgb(255, 0, 0); background-color: rgb(212, 192, 161); border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(98, 36, 0); border-right-color: rgb(98, 36, 0); border-bottom-color: rgb(98, 36, 0); border-left-color: rgb(98, 36, 0); "&gt;4&lt;/a&gt;
                    &lt;/li&gt;
                &lt;/ul&gt;
           &lt;/div&gt;
           &lt;div class="jPag-control-front" style="left: 176px; "&gt;
               &lt;span class="jPag-snext"&gt;»&lt;/span&gt;
               &lt;a class="jPag-last" style="color: rgb(255, 0, 0); background-color: rgb(212, 192, 161); border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(98, 36, 0); border-right-color: rgb(98, 36, 0); border-bottom-color: rgb(98, 36, 0); border-left-color: rgb(98, 36, 0); "&gt;Last&lt;/a&gt;
           &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>