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/