Center pagination in Bootstrap v2.1.0

Question

Center pagination in Bootstrap v2.1.0

Navigation

#1 by (2 votes)
#2 by (2 votes)
#3 by (1 votes)
#4 by (0 votes)

2

I need to centralize a pagination of results using Bootstrap v2.1.0, already tried to put the text-align in the div but also did not give. This is the code I'm using:

<div class="row-fluid">
    <div id="div_paginacao" class="span12">
        <ul class='pagination pagination-centered'><li><!-- páginas --></li></ul>
    </div>
</div>

I have also tried to put other spans above and below the "div_pagination" div but also did not. In fact it even gave, but when resizing the page, the spacing does not decrease.

twitter-bootstrap

asked by anonymous 27.01.2014 / 16:42

4 answers

PHPExcel generates broken worksheet [closed] Why does Spring boot not use EntityManager?

score 2 · Answer 1

2

As of version 2.3.0, you can already use the class text-center .

If this does not work, use% css% as in example

27.01.2014 / 16:54

score 2 · Answer 2

2

Problem solved. The div looks like this:

<div id="div_paginacao" class="span12" style="width: 400px; margin: 0 auto; float: none;"></div>

27.01.2014 / 17:12

score 1 · Answer 3

1

Do this:

// div that has the panel.

<div class="span7 center"> box </div>

// and use that .css below to center.

.center {
    float: none;
    margin-left: auto;
    margin-right: auto;
}

03.04.2014 / 14:28

score 0 · Answer 4

I do not remember well, but if Bootstrap 2.1.0 does not have the class .pagination-centered just create it. See the example :

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

<div class="pagination pagination-centered">
    <ul id="paginator_pages">
        <li class="disabled" id="paginator_previous"><a href="javascript:void(0)">«</a></li>
        <li class="active"><a href="javascript:void(0)" data-toogle="tab">1</a></li>
        <li><a href="javascript:void(0)" data-toogle="tab">2</a></li>
        <li><a href="javascript:void(0)" data-toogle="tab">3</a></li><li class="" id="paginator-next"><a href="javascript:void(0)">»</a></li></ul>
</div>