web-dev-qa-db-fra.com

Comment centrer .btn-group à partir de Twitter-bootstrap?

J'utilise Twitter-bootstrap , et j'ai trouvé assez difficile de centrer div qui a la classe .btn-group ( link ). Habituellement, j'utilise 

margin: 0 auto;

ou

text-align: center;

centrer des éléments dans div, mais cela ne fonctionne pas lorsque l'élément interne a la propriété float: left qui, dans ce cas, est utilisée pour les effets visuels.

http://jsfiddle.net/EVmwe/1

htmlcsscss3twitter-bootstrap
68
evfwcqcg

Edited: Cela a changé depuis Bootstrap 3. Voir la solution pour Bootstrap 3 ci-dessous.

Est-ce que l'ajout d'une division d'emballage est hors de question?

Regardez cet exemple: http://jsfiddle.net/EVmwe/4/

Partie importante du 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;   
}

Enrouler le groupe de boutons dans une division et configurer la division pour aligner le texte au centre. Le groupe de boutons doit également être écrasé pour que la largeur héritée soit affichée inline-block. 

Remplacer l'affichage d'ancres par inline-block, et float: none, fonctionnerait probablement aussi, comme l'a dit @ Andres Ilich. 

Mise à jour pour Bootstrap 3

A partir de Bootstrap 3, vous avez des classes d'alignement (comme indiqué dans la documentation ). Vous devez maintenant simplement ajouter la classe text-center à un parent. Ainsi:

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

Voir l'exemple de travail ici: http://jsfiddle.net/EVmwe/409/

73
mikaelb

Cela fonctionne pour moi (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>
73
Alberto Gaona

ou ajouter "centré sur la pagination", exemple:

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

pour 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>
6
Vasil Valchev

Depuis Twitter Bootstrap 3, aucune solution de contournement n'est nécessaire. Spécifiez simplement le text-align: center pour l'élément parent.

6
Tim

Déclarez simplement vos liens de boutons en tant que inline-block au lieu de float:left et votre déclaration text-align:center fonctionnera de la manière suivante:

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

Démo: http://jsfiddle.net/EVmwe/3/

6
Andres Ilich

Au cas où quelqu'un voudrait aussi changer la largeur du groupe .btn, vous pouvez faire min-width plutôt que width. J'ai fait ça:

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%;}

Cela définit la largeur du groupe btn sur 90% du centre de texte et chaque bouton inclus représente 50% du groupe de boutons (45% du div du centre de texte).

4
Nagra
<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>
1
Diego

J'utilise la solution suivante. 

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

Jetez le groupe btn dans une balise p et utilisez le style text-align: center for 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>
0
Jake Wolfe

Dans Bootstrap 3, il vous suffit de structurer aussi simplement que de suivre les modifications

    <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

Et ne modifiez que le style (remplacez le bootstrap) qui force le flottant à gauche de sorte que vous ne puissiez pas forcer par marge ou centre du texte:

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

Cela fonctionne pour moi, sans beaucoup de changement.

0
Osify

Cela a fait le tour pour moi dans Bootstrap v3.3

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