How to center .btn-group from twitter-bootstrap?

Edited: This has changed as of Bootstrap 3. See solution for Bootstrap 3 below.

Is adding a wrapping div out of the question?

Look at this example: http://jsfiddle.net/EVmwe/4/

Important part of the code:

/* a wrapper for the paginatior */
.btn-group-wrap {
    text-align: center;
}

div.btn-group {
    margin: 0 auto; 
    text-align: center;
    width: inherit;
    display: inline-block;
}

a {
    float: left;   
}

Wrapping the button group within a division, and setting the div to text-align center. The button group must also be overwritten to have display inline-block and inherited width.

Overwriting the anchors display to inline-block, and float: none, would also probably work, as @Andres Ilich said.


Update for Bootstrap 3

As of Bootstrap 3, you have alignment classes (as seen in the documentation). You now simply have to add the text-center class to a parent. Like so:

<div class="text-center">
    <ul class="pagination">
      <li class="disabled"><a href="#">&laquo;</a></li>
      <li class="active"><a href="#">1</a></li>
      <li><a href="#">2</a></li>
      <li><a href="#">3</a></li>
      <li><a href="#">4</a></li>
      <li><a href="#">5</a></li>
      <li><a href="#">&raquo;</a></li>
    </ul>
</div>

See working example here: http://jsfiddle.net/EVmwe/409/


Adding text-center to a parent works for me (Bootstrap 3):

<div class="text-center">
   <div class="btn-group">
      <a href=1 class="btn btn-small">1</a>
      <a href=1 class="btn btn-small">2</a>
      <a href=1 class="btn btn-small">3</a>
   </div>
</div>

or add "pagination-centered", example:

<div class="btn-toolbar pagination-centered">
  <div class="btn-group">
    <a href=1 class="btn btn-small">1</a>
    <a href=1 class="btn btn-small">2</a>
    <a href=1 class="btn btn-small">3</a>
  </div>
</div>