Wie zentriere ich eine .btn-Gruppe von Twitter-Bootstrap?

Ich benutze Twitter Bootstrapund ich fand es ziemlich schwer zu zentrieren div was Klasse hat .btn-group (Verknüpfung). Normalerweise benutze ich

margin: 0 auto; 

oder

text-align: center;

um Dinge innerhalb von div zu zentrieren, aber es funktioniert nicht, wenn das innere Element eine Eigenschaft hat float: left die in diesem Fall für visuelle Effekte verwendet wird.

http://jsfiddle.net/EVmwe/1

Hinzufügen text-center an einen Elternteil funktioniert für mich (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>

Bearbeitet: Dies hat sich ab Bootstrap 3 geändert. Siehe Lösung für Bootstrap 3 unten.

Kommt das Hinzufügen eines Wrapping-Div nicht in Frage?

Sehen Sie sich dieses Beispiel an: http://jsfiddle.net/EVmwe/4/

Wichtiger Teil des Codes:

/* 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;   
}

Umschließen der Schaltflächengruppe innerhalb einer Division und Festlegen des div auf die Textausrichtungsmitte. Die Schaltflächengruppe muss auch überschrieben werden, um Inline-Block und vererbte Breite anzeigen zu können.

Das Überschreiben der Ankeranzeige in Inline-Block und Float: none würde wahrscheinlich auch funktionieren, wie @Andres Ilich sagte.

Update für Bootstrap 3

Ab Bootstrap 3 haben Sie Alignment-Klassen (wie in der Dokumentation). Sie müssen jetzt nur noch die hinzufügen text-center Klasse zu einem Elternteil. 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>

Siehe Arbeitsbeispiel hier: http://jsfiddle.net/EVmwe/409/

oder fügen Sie “paginierungszentriert” hinzu, Beispiel:

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

für Bootstrap 4

<div class="text-center">
    <div class="btn-group">
        <a href="#" class="btn btn-primary">text 1</a>
        <a href="#" class="btn btn-outline-primary">text 2</a>
    </div>
</div>

Deklarieren Sie einfach Ihre Button-Links als inline-block Anstatt von float:left und dein text-align:center Deklaration funktioniert wie folgt:

.btn-group a {
    display:inline-block;
}

Demo: http://jsfiddle.net/EVmwe/3/

Seit Twitter Bootstrap 3 ist keine Problemumgehung erforderlich. Geben Sie einfach die an text-align: center für das übergeordnete Element.

Falls jemand auch die Breite der .btn-Gruppe ändern möchte, kann man statt width auch min-width verwenden. Ich war das:

HTML:

<div class="text-center">
<div class="btn-group">
    <button class="btn">1</button>
    <button class="btn">2</button>
</div>
</div>

CSS:

.btn-group {min-width: 90%;}
.btn {width: 50%;}

Dadurch wurde die Breite der BTN-Gruppe auf 90 % der Textmitte festgelegt, und jede enthaltene Schaltfläche macht 50 % der Schaltflächengruppe aus (45 % des Textcenter-Div).