Центрирование div пагинации

Question

Обычно нумерация страниц выглядит следующим образом:

Когда я добавлю что-то вроде:

<td align="center"> или <center><div id="pagination></div></center>

Это выглядит так:

Я также пытался использовать style="margin: 0px auto;", но это не сработало.

Вот код:

<table>
    <tr>
        <td align="center">
            <div id="pagination"></div>
        </td>
    </tr>
</table>

Да, я также пытался использовать эти атрибуты в div (включая text-align: center;).

CSS часть:

.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;
}

Это вывод HTML из Firebug:

<div id="pagination" class="jPaginate" style="padding-left: 71px; ">
            <div class="jPag-control-back">
                <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); ">First</a>
                <span class="jPag-sprevious">«</span>
           </div>
           <div style="overflow-x: hidden; overflow-y: hidden; width: 101px; ">
               <ul class="jPag-pages" style="width: 99px; ">
                  <li><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); ">1</a>
                  </li>
                  <li>
                     <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); ">2</span>
                  </li>
                  <li>
                     <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); ">3</a>
                  </li>
                  <li><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); ">4</a>
                  </li>
              </ul>
         </div>
         <div class="jPag-control-front" style="left: 176px; ">
             <span class="jPag-snext">»</span>
             <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); ">Last</a>
         </div>
</div>

Answer 1

Я дам вам ссылку, по которой я получил свое решение, из соответствующей части моего исходного кода.

Ссылка:

Центрирование меню

Все, что нам нужно сделать, это заключить тег ul во внешний контейнер, ширина которого равна 100%, а переполнение скрыто.Затем тег ul задается с относительной позицией и перемещается влево с левой позицией 50%.Наконец, тег li также стилизован с относительной позицией, плавающей влево, но на этот раз с правой позицией 50%.... и это, как говорится, все, что нужно. kquote

Мой HTML:

<div class="menuholder fleft">
    <ul class="mainmenu fleft">
        <li class="fleft"><a href="home.html">Home</a></li>
        <li class="fleft"><a href="b.html">B</a></li>            
    </ul>
</div>

Мой CSS:

.menuholder
{
    clear: both;
    width: 100%;
    overflow: hidden;        
}

.mainmenu
{
    padding: 0;
    margin: 0 auto;
    list-style-type: none;
    position: relative;
    left: 50%;
}

.mainmenu li
{
    position: relative;
    right: 50%;
}

.mainmenu a
{
    width: auto;
    display: block;        
}

.fleft
{
    float: left;
}

Answer 2

Я хотел бы предложить вам мой метод выравнивания по правому краю. Сначала вы должны обернуть ваш div в другой div с классом "pagination-wrapper-right". И после этого пишите правильные стили CSS. В моем случае я покажу вам мои стили scss))

<div class="col-xs-6 col-sm-6 col-md-6 pagination">
  <div class="pagination-wrapper-right">
      <div class="page-pagination"></div>
  </div>
</div>

Где div.page-pagination - блок jPagination div.pagination-wrapper-right - где обертка для выравнивания

после того, как мы можем написать стили CSS:

.pagination-wrapper-right{
   clear: both;
   float: right;
 }
.jPaginate{
  padding-left: 62px;
  display: inline-block;
  padding-right: 62px;
}

Попробуй сам и удачи

Answer 3

вы можете изменить класс jPaginate следующим образом:

    .jPaginate{
    height:34px;
    position:relative;
    color:#a5a5a5;
    font-size:small;   
    width:auto;
    display:inline-block;
    }

Answer 4

вместо создания таблиц попробуйте отредактировать класс разбивки на страницы внутри вашего CSS и установить для его левого и правого полей значение auto

.

http://www.w3.org/Style/Examples/007/center.en.html