在bootstrap中居中分页 [英] Centering the pagination in bootstrap

问题描述

我在分页中有此代码

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

But my ul is left aligned. Is there any way to center the ul wrt div?

我尝试了 margin：auto auto 和 margin：0 auto

I tried margin: auto auto and margin :0 auto they but didn't work.

推荐答案

Bootstrap已从3.0添加了一个新类。

Bootstrap has added a new class from 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有新类

Bootstrap 4 has new class

<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

For 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;

It works because ul is using inline-block;

或者如果您愿意使用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>

这篇关于在bootstrap中居中分页的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！