Question

我正在使用Bootstrap 3构建一个站点，我似乎无法将分页置于中心位置。我做了一些研究，并将分页包含在一个带有“文本中心”类的div中，但它仍然没有居中。我的代码如下：

<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的inspect元素时，我可以看到DIV和UL都占据了内容区域的整个宽度，并且它们都具有text-align：center。但我的分页仍在左边。如果你想看到它，它就是现场：http://www.aboutgmo.org/categories/alternative-dairy-products/10.html

我有什么想法可以解决这个问题？谢谢！

Answer 1

在agmo.css中，有这条规则......

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

删除它。 width: 100%;导致分页ul占用所有水平空间，因此无法居中。

此规则中的

text-align: center;也不是必需的，但它不是问题的根源。

Answer 2

d.ts

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

无法中心bootstrap3分页

2 个答案: