html - div - Cómo centrar.btn-group de twitter-bootstrap?

div a la derecha bootstrap 4

Question

Estoy usando twitter-bootstrap , y me pareció bastante difícil centrar div que tiene clase .btn-group ( link ). Usualmente, yo uso

margin: 0 auto; 

o

text-align: center;

centrar cosas en div, pero no funciona cuando el elemento interno tiene propiedad float: left que en este caso se usa para efectos visuales.

http://jsfiddle.net/EVmwe/1

Answer 1

Desde Twitter Bootstrap 3 no hay necesidad de ninguna solución. Simplemente especifique text-align: center para el elemento principal.

Answer 2

En Bootstrap 3, solo necesita estructurar tan simple como el siguiente cambio

    <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

Y modifique el estilo solo de este modo (anule el programa de arranque), que fuerza flota a la izquierda para que no pueda forzar por margen o centro de texto:

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

Esto funciona para mí, sin muchos cambios.

Answer 3

En caso de que alguien también desee cambiar el ancho del grupo .btn, puede hacer un ancho mínimo en lugar de ancho. Hice esto:

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

Eso establece el ancho del grupo btn al 90% del centro de texto y cada botón incluido es el 50% del grupo de botones (45% del div del centro de texto).

Answer 4

Esto funciona para mí (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 5

Estoy usando la siguiente solución.

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

Simplemente declare los enlaces de sus botones como en inline-block lugar de float:left y su declaración text-align:center funcionará, así:

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

Demostración: http://jsfiddle.net/EVmwe/3/

Answer 7

Tira el grupo btn en la etiqueta ap y usa text-align: center style para 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 8

o agregue "centrado en la paginación", ejemplo:

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

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

Answer 10

Editado: Esto ha cambiado desde Bootstrap 3. Consulte la solución para Bootstrap 3 a continuación.

Está agregando un envoltorio div fuera de la cuestión?

Mira este ejemplo: http://jsfiddle.net/EVmwe/4/

Parte importante del código:

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

Envolviendo el grupo de botones dentro de una división, y configurando el div para alinear el texto al centro. El grupo de botones también debe sobrescribirse para mostrar el ancho en línea y heredado.

Sobrescribir la pantalla de los anclajes para bloquear en línea, y flotar: ninguno, probablemente también funcione, como dijo @Andres Ilich.

Actualización para Bootstrap 3

A partir de Bootstrap 3, tiene clases de alineación (como se ve en la documentation ). Ahora simplemente tiene que agregar la clase de text-center a uno de los padres. Al igual que:

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

Vea el ejemplo de trabajo aquí: http://jsfiddle.net/EVmwe/409/