center pagination?

[edsu]

Is there a known and preferred way to center the pagination div?

[lvivier]

Try something like this?

.pagination.center,
.pagination.center ul {
    float: left;
    position: relative;
}
.pagination.center { left: 50%; }
.pagination.center ul { left: -50%; }

and then

<div class="pagination center">
…
</div>

[edsu]

that worked perfectly, thanks so much!

[jasny]

Instead of using relative positioning, you can also do

.pagination ul {
   float: none;
   display: inline-block;
   overflow: hidden;
}
.pagination.center {
   text-align: center;
}

I think this is preferable. In fact, I've put in a pull request #638 :)

[kevva]

A little more cross browser friendly.

.pagination {
    word-spacing: -1em; /* hide whitespace between elements if separated by whitespace in the source */
    text-align:center;
}
.pagination li {
    display: -moz-inline-box; /* FF2 or lower */
    display: inline-block;
    word-spacing: normal;
    vertical-align: top;
    /* IE6/7 inline-block hack */
    *display: inline;
    *zoom: 1;
}

http://jsfiddle.net/KGN4A/1/

[jasny]

Thank kevva. However, don't you mean .pagination ul instead of .pagination li :)

[kevva]

Nope. Have a look at the example.

[jasny]

@kevva Unfortunately your demo is not how the pagination element works in bootstrap. First of all .pagination is the <div> and not the <ul>.

The .pagination ul is still floating left. Setting .pagination ul { float: none; }, makes it span over the full width, which looks different than the original.

See http://jsfiddle.net/hMR4r/

It's needed to display .pagination ul as inline-block. You can leave .pagination li unchanged. This also means that you don't have to do word-spacing: -1em;

This works better: http://jsfiddle.net/mJvKC/

However I think my previous version will do, since it only have to work for FF4+ / IE7+, not for older browsers.

[kevva]

@jasny, yeah, you're right. You won't need overflow hidden though, but inline-block hack is needed for IE7.

.pagination.center {
  text-align: center;
}
.pagination ul {
  display: -moz-inline-box; /* FF2 or lower */
  display: inline-block;
  /* IE6/7 inline-block hack */
  *display: inline;
  *zoom: 1;
}

http://jsfiddle.net/KGN4A/11/

[nokah1988]

thanks for sharing this little code