居中分页格

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

这是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

创建表，而不是尝试编辑你的CSS里面分页类，并设置其左，右页边距汽车

看看这里

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

Answer 2

我会给你我的解决方案从那里我的源代码的相关部分的链接。

链接：

Centering menus

所有我们需要做的是封闭UL标签中有100％和溢出的宽度设置为隐藏的外部容器。 然后用相对位置对ul标签进行样式设计，并左移50％的左侧位置。 最后，li标签也被设计为相对位置，左侧浮动，但这次是50％的正确位置。 ...那像他们说的是所有needed.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 3

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

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

Answer 4

我想建议你我的方法右对齐。首先你应该把你的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 - 分页 - jPagination块div.pagination - 包装 - 右 - 在经过我们的包装对准

可以编写CSS样式：

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

尝试它自己和好运气