Wie zentriere ich .btn-group von Twitter-Bootstrap?

Ich benutze Twitter-Bootstrap und fand es ziemlich schwierig zu zentrieren, divwelche Klasse .btn-group( Link ) hat. Normalerweise benutze ich

margin: 0 auto; 

oder

text-align: center;

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

http://jsfiddle.net/EVmwe/1

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

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

Schauen 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 Abteilung und Festlegen der Teilung auf die Mitte für die Textausrichtung. Die Schaltflächengruppe muss auch überschrieben werden, damit Inline-Block und geerbte Breite angezeigt werden.

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

Update für Bootstrap 3

Ab Bootstrap 3 verfügen Sie über Ausrichtungsklassen (siehe Dokumentation ). Sie müssen die text-centerKlasse jetzt einfach einem übergeordneten Element hinzufügen . Wie 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/

Das funktioniert bei mir (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>

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-blockstatt float:leftund Ihre text-align:centerDeklaration 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 das text-align: centerfür das übergeordnete Element an.

Falls jemand auch die Breite der .btn-Gruppe ändern möchte, können Sie min-width anstelle von width verwenden. Ich tat dies:

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 wird die Breite der BTN-Gruppe auf 90% der Textmitte festgelegt, und jede enthaltene Schaltfläche entspricht 50% der Schaltflächengruppe (45% der Div. Der Textmitte).

In Bootstrap 3 müssen Sie nur so einfach strukturieren wie nach der Änderung

    <div class="btn-toolbar">
        <div class="btn-group">
            <button onclick="#" type="button" class="btn btn-default btn-sm">
                Click 1                                     
            </button>           
            <button onclick="#" type="button" class="btn btn-default btn-sm">
                Click 2
            </button>
            <button onclick="#" class="btn btn-default btn-sm" type="button">                                               
                Click 3
            </button>
            <button onclick="#" type="button" class="btn btn-default btn-sm">
                Click 4
            </button>
            <button onclick="#" type="button" class="btn btn-default btn-sm">
                Click 5
            </button>
            <button onclick="#" type="button" class="btn btn-default btn-sm">
                Click 6
            </button>
        </div>
    </div

Und ändern Sie den Stil nur so (überschreiben Sie den Bootstrap), wodurch er nach links schwebt, sodass Sie nicht durch Rand oder Textmitte erzwingen können:

.btn-toolbar .btn-group {float:initial;}

Das funktioniert bei mir ohne große Veränderung.

Ich verwende die folgende Lösung.

<div class="center-block" style="max-width:400px">
  <a href="#" class="btn btn-success">Accept</a>
  <a href="#" class="btn btn-danger"> Reject</a>
</div>

<div class="btn-group mx-auto" role="group">
    <a href="#" class="btn btn-outline-primary"> Button 1</a>
    <a href="#" class="btn btn-outline-primary"> Button 2</a>
</div>

Wirf die btn-Gruppe in das ap-Tag und verwende text-align: center style für p {}

    p {
    text-align: center;
    }

    <p>
    <div class="btn-group" role="group" aria-label="...">
    <button type="button" class="btn btn-default">Left</button>
    <button type="button" class="btn btn-default">Middle</button>
    <button type="button" class="btn btn-default">Right</button>
    </div>
    </p>

Dies hat den Trick für mich in Bootstrap v3.3 getan

.btn-group {
  margin: auto;
  display: flex;
  flex-direction: row;
  justify-content: center;
}