在 bootstrap 中居中分页

Question

我在分页中有这段代码

<div class="pagination">
    <ul>
        <li><a href="?p=0" data-original-title="" title="">1</a></li>
        <li><a href="?p=1" data-original-title="" title="">2</a></li>
    </ul>
</div>

但是我的 ul 是左对齐的。有什么办法可以使 ul wrt div ？

我尝试 margin: auto auto 和 margin :0 auto 但没有用。

原文由 user192362127 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

Bootstrap 从 3.0 开始添加了一个新类。

 <div class="text-center">
    <ul class="pagination">
        <li><a href="?p=0" data-original-title="" title="">1</a></li>
        <li><a href="?p=1" data-original-title="" title="">2</a></li>
    </ul>
</div>

Bootstrap 4 有了新的类

<div class="text-xs-center">
    <ul class="pagination">
        <li><a href="?p=0" data-original-title="" title="">1</a></li>
        <li><a href="?p=1" data-original-title="" title="">2</a></li>
    </ul>
</div>

对于 2.3.2

 <div class="pagination text-center">
    <ul>
        <li><a href="?p=0" data-original-title="" title="">1</a></li>
        <li><a href="?p=1" data-original-title="" title="">2</a></li>
    </ul>
</div>

---

给这样的方式：

 .pagination {text-align: center;}

它起作用是因为 ul 正在使用 inline-block;

小提琴：http: //jsfiddle.net/praveenscience/5L8fu/

---

或者，如果您想使用 Bootstrap 的类：

 <div class="pagination pagination-centered">
    <ul>
        <li><a href="?p=0" data-original-title="" title="">1</a></li>
        <li><a href="?p=1" data-original-title="" title="">2</a></li>
    </ul>
</div>

小提琴：http: //jsfiddle.net/praveenscience/5L8fu/1/

原文由 Praveen Kumar Purushothaman 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

对于 Bootstrap 3.0 和 2.3.2，为了居中分页，可以将 .text-center 类应用于包含的 div 。

注意： 在标记中应用 .pagination 类的位置在 Bootstrap 2.3.2 和 3.0 之间发生了变化。请参阅下文，或阅读有关分页的 Bootstrap 文档： Bootstrap 3.0 、 Bootstrap 2.3.2 。

引导程序 3 示例

<div class="text-center">
    <ul class="pagination">
        <li><a href="?p=0" data-original-title="" title="">1</a></li>
        <li><a href="?p=1" data-original-title="" title="">2</a></li>
    </ul>
</div>

http://jsfiddle.net/mynameiswilson/eYNMu/

Bootstrap 2.3.2 示例

<div class="pagination text-center">
    <ul>
        <li><a href="?p=0" data-original-title="" title="">1</a></li>
        <li><a href="?p=1" data-original-title="" title="">2</a></li>
    </ul>
</div>

http://jsfiddle.net/mynameiswilson/84X3M/

原文由 Ben 发布，翻译遵循 CC BY-SA 3.0 许可协议