Tengo el siguiente bootstrap código html (su JSX de ahí el className pero la idea es la misma):

<div className="toggleView btn-group center-block" role="group" aria-label="Basic example">
        <button onClick={this.handleTimelineClick} type="button" className={this.state.toggleCalendar == false ? "btn btn-secondary active" : "btn btn-secondary"}>Timeline</button>
        <button onClick={this.handleCalendarClick} type="button" className={this.state.toggleCalendar == true ? "btn btn-secondary active " :"btn btn-secondary"}>Calendar</button>
 </div>

Estoy tratando de centro de este código, ya sea con bootstrap centro de bloque o con CSS, pero no pueden parecer para que funcione:

Bootstrap 4 centro-bloque incapaz de centro

La barra verde que pone de relieve la div toggleView.

La única css que estoy usando es el siguiente:

.toggleView {
    padding: 20px;
}

¿Por qué no puedo centro de este grupo de botones?

OriginalEl autor ApathyBear | 2016-07-07

3 Comentarios

  1. 46

    btn-group ha display:inline-block, así que usa text-center en el contenedor primario..

    http://codeply.com/go/hyUYkUrtRN

    NOTA: En Bootstrap 4, center-block es ahora mx-auto, lo que representa margin: 0 auto; para el centrado display:block elementos. Bootstrap 4 ahora tiene un d-block clase también, entonces, un elemento en línea puede ser hecho display:block como esta..

    <img src=".." class="d-block mx-auto" >

    Véase también: Centrar el contenido en el interior de una columna de inicio 4

    Gracias, esto es un poco confuso para mí por qué esto funciona, aunque. Se puede discutir un poco más sobre display:inline-block y lo que realmente se está haciendo y cómo el texto-centro de resolver este problema?
    Básicamente center-block sólo funcionaría en un display:block elemento
    Para los lectores futuros parece m-x-auto se cambia el nombre a mx-auto fram alfa.5
    Lo que he encontrado en Bootstrap v4.0.0-alfa.6. mx-auto tiene sólo dos valores, margin-left: auto !importante y margin-right: auto !importante. vertical de clase media-trabajó para mí.

    OriginalEl autor Zim

  2. 5

    Bootstrap 4 (como de 2017-08-16) uso d-block y centro de utilizar mx-auto.

    A menos que el elemento tiene un ancho definido no funciona en absoluto.

    OriginalEl autor Salvador Cervantes

  3. 5

    Bootstrap 4 no tiene center-block en su Lugar, yo uso d-block mx-auto que establece la pantalla para bloquear, y los márgenes izquierdo y derecho para auto.

    Este es ahora d-block mx-auto
    y lo que no funciona en absoluto para centrar un elemento
    Estás seguro? Se ha trabajado para mí. Puedes publicar un ejemplo?

    OriginalEl autor Greg Gum

Dejar respuesta

Please enter your comment!
Please enter your name here