Question

通常情况下，分页看起来像这样：

enter image description here

我什么时候会添加：

<td align="center"> 或<center><div id="pagination></div></center>

看起来像这样：

enter image description here

我还尝试使用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;
}

这是Firebug的HTML输出：

<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

我会给你链接，从那里我得到我的解决方案，然后是源代码的相关部分。

链接：

Centering menus

我们需要做的就是将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

我想建议你采用右对齐的方法。首先你应该用“pagination-wrapper-right”类将你的div包装在另一个div中。然后写出正确的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 block div.pagination-wrapper-right - 用于对齐的包装器

在我们编写css样式之后

：

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

尝试自己，祝你好运

Answer 3

而不是创建表尝试编辑CSS中的分页类并将其左右边距设置为自动

看看这里

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

Answer 4

您可以像这样修改jPaginate类::

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

以分页div为中心

4 个答案: