无法将 bootstrap3 分页居中答案

【问题标题】：Can't center bootstrap3 pagination无法将 bootstrap3 分页居中
【发布时间】：2014-03-25 08:23:47
【问题描述】：

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

有什么办法可以解决这个问题吗？谢谢！

【问题讨论】：

使用网格偏移类getbootstrap.com/css/#grid-offsetting
感谢@CrayonViolent 的建议，但这实际上不起作用。我试过了，你得到的是一个居中的网格单元，分页在该单元内左对齐。我想它更接近中心，但不是中心。更恰当的描述是缩进分页。（我确实尝试将文本中心类添加到行和列）。

标签： html css twitter-bootstrap pagination

【解决方案1】：

在agmo.css，有这个规则……

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

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

此规则中的text-align: center; 也不是必需的，但这不是问题的根源。

【讨论】：

谢谢！这就像一个魅力！如果我有足够的声望，我会投票给你！

【解决方案2】：

.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>

【讨论】：