Wie man .btn-group von twitter-bootstrap zentriert?

Question

Ich benutze twitter-bootstrap, und ich fand es ziemlich schwer zu zentrieren div, die Klasse .btn-group (link) hat. Normalerweise verwende ich

margin: 0 auto; 

oder

text-align: center; 

Sachen innerhalb div zum Zentrum, aber es funktioniert nicht, wenn das innere Element Eigenschaft hat float: left die in diesem Fall für visuelle Effekte verwendet.

http://jsfiddle.net/EVmwe/1

Answer 1

Edited: Das hat sich geändert, wie Bootstrap 3. Siehe Lösung für Bootstrap 3 unten.

Fügt ein Wrapping Div aus der Frage?

Schauen Sie sich das Beispiel: 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; 
} 

Wrapping die Knopfgruppe innerhalb einer Abteilung, und die Einstellung der div in Text-align Zentrum. Die Schaltflächengruppe muss auch überschrieben werden, damit die Inline-Block-Anzeige und die vererbte Breite angezeigt werden.

Überschreiben der Anker-Anzeige zu Inline-Block und Float: keine, würde wahrscheinlich auch funktionieren, wie @Andres Ilich sagte.

---

Update für Bootstrap 3

Ab Bootstrap 3 haben Sie Ausrichtungsklassen (wie in der documentation gesehen). Sie müssen nun einfach die text-center Klasse zu einem Elternteil 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 Beispiel hier zu arbeiten: http://jsfiddle.net/EVmwe/409/

Answer 2

einfach Ihre Schaltfläche Links als inline-block erklären statt float:left und Ihre text-align:center Erklärung funktionieren wird, wie so:

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

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

Answer 3

oder fügen Sie "Paginierung-zentriert", 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> 

Answer 4

Da Twitter Bootstrap 3 gibt es keine Notwendigkeit für eine Abhilfe. Geben Sie einfach text-align: center für das Elternelement an.

Answer 5

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

Answer 6

Falls jemand auch die Breite der .btn-Gruppe ändern möchte, können Sie min-width tun anstatt Breite.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%;} 

, dass der BTN-Gruppe Breite auf 90% der Text-Zentrum gesetzt und jeweils enthalten Taste 50% der Schaltfläche Gruppe (45% des Text-Center-Div).

Answer 7

In Bootstrap 3, brauchen Sie nur so einfach zu gestalten wie der Wandel folgende

<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 den Stil nur diese (die Bootstrap außer Kraft setzen), die links-Kraft schweben, so dass Sie nicht von Rand oder Text-Center erzwingen :

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

Das funktioniert für mich, ohne viel zu ändern.

Answer 8

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> 

Answer 9

Werfen Sie die BTN-Gruppe in p-Tag und verwenden, um Text-align: center Stil 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> 

Answer 10

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>