は、ページネーションの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> 

はい、私はまた、これは（text-align: center;含む）div要素に属性を使用しようとしました。

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内のページネーションクラスを編集しようとするその左右のマージンを設定自動

はこちらをご覧

を持っています3210

Answer 2

ソースコードの関連部分から解決策を得たリンクを提供します。

リンク：

Centering menus

我々がやらなければならないことは、隠しに設定し、100％の幅とオーバーフローを持って外容器にULタグを囲んでいます。 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; 
} 

は、自己と幸運