不能以bootstrap3分頁爲中心

我正在使用Bootstrap 3構建一個站點，而且我似乎無法獲得分頁中心。我已經做了一些研究，並且將分頁以分類「文本中心」的形式包裝，但它仍然不居中。我的代碼如下：不能以bootstrap3分頁爲中心

<div class="text-center"> 
    <ul class="pagination"> 

    <li><a href="/categories/alternative-dairy-products/9.html">&laquo;</a></li> 
    <li><a href="/categories/alternative-dairy-products/8.html">8</a></li> 
    <li><a href="/categories/alternative-dairy-products/9.html">9</a></li> 
    <li class="active"><a href="#">10</a></li> 
    <li><a href="/categories/alternative-dairy-products/11.html">11</a></li> 
    <li><a href="/categories/alternative-dairy-products/12.html">12</a></li> 
    <li><a href="/categories/alternative-dairy-products/11.html">&raquo;</a></li> 
    </ul> 
</div>

當我使用Chrome的檢查元素，我可以看到，無論是DIV和UL佔用內容區域的整個寬度，並且它們都具有文本對齊：中心。但我的分頁仍然在左邊。這裏它是活的，如果你想看到它：http://www.aboutgmo.org/categories/alternative-dairy-products/10.html

任何想法如何解決這個問題？謝謝！

來源

2014-02-23 user2874270

使用網格膠印級的http://getbootstrap.com/css/#grid-offsetting您的建議@CrayonViolent –

謝謝，但實際上行不通。我試過了，你得到的是一個居中的網格單元格，分頁符在該單元格內左對齊。我想它離中心更近，但沒有居中。對它所完成的功能的更爲恰當的描述是縮進分頁。（並且我嘗試添加文本中心類到行和列）。 – user2874270

在agmo.css，有此規則...

.pagination { 
    text-align: center; 
    width: 100%; 
}

刪除它。 width: 100%;導致分頁ul佔據所有水平空間，因此它不能居中。

text-align: center;這個規則也不是必需的，但它不是問題的根源。

來源

2014-02-23 21:42:53

謝謝！這就像一個魅力！如果我有足夠的聲譽，我會投票給你！ – user2874270

.pagination-centered { 
 
    text-align: center; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="pagination-centered"> 
 
    <nav> 
 
    <ul class="pagination"> 
 
    <li> 
 
     <a href="#" aria-label="Previous"> 
 
     <span aria-hidden="true">&laquo;</span> 
 
     </a> 
 
    </li> 
 
    <li><a href="#">1</a></li> 
 
    <li><a href="#">2</a></li> 
 
    <li><a href="#">3</a></li> 
 
    <li><a href="#">4</a></li> 
 
    <li><a href="#">5</a></li> 
 
    <li> 
 
     <a href="#" aria-label="Next"> 
 
     <span aria-hidden="true">&raquo;</span> 
 
     </a> 
 
    </li> 
 
    </ul> 
 
</nav> 
 
</div>

來源

2015-11-28 06:33:41

不能以bootstrap3分頁爲中心

回答

相關問題