我有分页的代码

<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 automargin :0 auto,但都没用.

推荐答案

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;

Fiddle: 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>

Fiddle: http://jsfiddle.net/praveenscience/5L8fu/1/

Html相关问答推荐

Flexbox响应式图像不会缩小

如何使文本从按钮中心生长?

如何只混合部分的背景而不是内容<>

无法使xpath为HTML代码块工作

为什么使用Google字体的SVG徽标内的文本不能在网页上正确呈现?

如何在css中将包含多行文本的多个p-tag放在一起(并排)?

HTML中的ARIA标签:在元素内部还是外部?(&Q;

如何 Select 表格';TMS Web Core中的body html元素?

HTML 邮箱在 Gmail 中无法正确显示

为什么要添加换行符(至少在 Google Chrome 中)

如何使用 CSS 应用带有笔划的文本阴影?

为什么我的 div 元素没有形成一个圆形时钟?