justificado - Centro alinea una columna en Twitter bootstrap

div a la derecha bootstrap 4

Question

Esta pregunta ya tiene una respuesta aquí:

• Centre una columna usando Twitter Bootstrap 29 respuestas

Empecé a aprender Bootstrap. Mi pregunta es cómo centrar el centro de una columna horizontalmente, bootstrap contiene el diseño de 12 columnas, no hay un número medio. Para ser más claros, si se tratara del diseño de 11 columnas, el número del medio habría sido 6 (5 columnas a la izquierda, 1 columna a la mitad, 5 columnas a la derecha)

Answer 1

Con bootstrap 3 la mejor forma de lograr lo que quieres es ... con columnas de compensación . Por favor, vea estos ejemplos para más detalles:
http://getbootstrap.com/css/#grid-offsetting

En resumen, y sin ver sus divisiones, aquí hay un ejemplo de lo que podría ayudar, sin usar ninguna clase personalizada. Solo tenga en cuenta cómo se usa el " col-6 " y cómo la mitad de eso es 3 ... por lo que se utiliza el " offset-3 ". Dividir por igual permitirá el espaciado centrado que está buscando:

<div class="container">
<div class="col-sm-6 col-sm-offset-3">
your centered, floating column
</div></div>

Answer 2

La pregunta se responde correctamente aquí Centre una columna usando Twitter Bootstrap 3

Para filas impares: es decir, col-md-7 o col-large-9 usan esto

Agregue col-centered a la columna que desea centrada.

<div class="col-lg-11 col-centered">

Y agrega esto a tu hoja de estilo:

.col-centered{
float: none;
margin: 0 auto;
}

Para filas pares: es decir, col-md-6 o col-large-10 usan esto

Simplemente use la clase de col de desplazamiento de bootstrap 3. es decir,

<div class="col-lg-10 col-lg-offset-1">

Answer 3

Probé los enfoques anteriores, pero estos métodos fallan cuando aumenta dinámicamente la altura del contenido en una de las columnas, básicamente empuja hacia abajo las otras columnas.

para mí, la solución básica de diseño de mesas funcionó.

// Apply this to the enclosing row
.row-centered {
text-align: center;
display: table-row;
}
// Apply this to the cols within the row
.col-centered {
display: table-cell;
float: none;
vertical-align: top;
}

Answer 4

Si no puedes poner 1 columna, simplemente puedes poner 2 columnas en el medio ... (Solo estoy combinando respuestas) Para Bootstrap 3

<div class="row">
<div class="col-lg-5 ">5 columns left</div>
<div class="col-lg-2 col-centered">2 column middle</div>
<div class="col-lg-5">5 columns right</div>
</div>

Incluso, puede enviar texto a la columna centrada al agregar esto al estilo:

.col-centered{
display: block;
margin-left: auto;
margin-right: auto;
text-align: center;
}

Además, hay otra solución here