¿Cómo centrar un div con Bootstrap 2?

Question

http://twitter.github.com/bootstrap/scaffolding.html

Probé como todas las combinaciones:

<div class="row">
  <div class="span7 offset5"> box </div>
</div>

o

<div class="container">
  <div class="row">
    <div class="span7 offset5"> box </div>
  </div>  
</div>

cambiaron los números de intervalo y desplazamiento ...

Pero no puedo obtener un cuadro simple perfectamente centrado en una página :(

Solo quiero un cuadro de 6 columnas de ancho centrado ...

---

editar:

lo hice con

<div class="container">
  <div class="row" id="login-container">
    <div class="span8 offset2">
       box
    </div>
  </div>
</div>

Pero el cuadro es demasiado ancho, ¿hay alguna forma de hacerlo con span7?

span7 offset2 proporciona un relleno adicional a la izquierda span7 offset3 relleno adicional a la derecha ...

Answer 1

además de reducir el div en sí al tamaño que desee, al reducir el tamaño del intervalo como tal ... class="span6 offset3", class="span4 offset4", etc ... algo tan simple como style="text-align: center" en el div podría tener el efecto que está buscando

no puede usar span7 con ningún desplazamiento establecido y obtener el span centrado en la página (porque el total de spans= 12)

Answer 2

Los intervalos de Bootstrap están flotando hacia la izquierda.Todo lo que se necesita para centrarlos es anular este comportamiento.Hago esto agregando esto a mi hoja de estilo:

.center {
     float: none;
     margin-left: auto;
     margin-right: auto;
}

Si tiene esta clase definida, simplemente agréguela al intervalo y estará listo.

<div class="span7 center"> box </div>

Tenga en cuenta que esta clase de centro personalizada debe definirse después del CSS de arranque.Puede utilizar !important, pero no se recomienda.

Answer 3

Bootstrap3 tiene la clase .center-block que puede usar.Se define como

.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

Documentación aquí .

Answer 4

Si desea realizar un arranque completo (y no el modo automático de izquierda / derecha), necesita un patrón que se ajuste a 12 columnas, por ejemplo.2 espacios en blanco, 8 contenidos, 2 espacios en blanco.Eso es lo que hará esta configuración. Solo cubre las variantes -md- , tiendo a ajustarlo a tamaño completo para pequeño agregando col-xs-12

<div class="container">
  <div class="col-md-8 col-md-offset-2">
     box
  </div>
</div>

Answer 5

Parece que solo deseaba centrar la alineación de un solo contenedor. El marco de arranque podría complicar demasiado ese ejemplo, podría haber tenido un div independiente con su propio estilo, algo como:

<div class="login-container">
  <!-- Your Login Form -->
</div>

y estilo:

.login-container {
  margin: 0 auto;
  width: 400px; /* Whatever exact width you are looking for (not bound by preset bootstrap widths) */
}

Eso debería funcionar bien si está anidado en algún lugar dentro de un div de bootstrap .container.

Answer 6

agregue el contenido del centro de clase

/** Center the contents of the element **/
.centercontents {
    text-align: center !important;
}

Answer 7

El código de @ZuhaibAli me funcionó, pero lo cambié un poco:

Creé una nueva clase en css

.center {
     float: none;
     margin-left: auto;
     margin-right: auto;
}

entonces el div se convierte en

<div class="center col-md-6"></div>

Agregué col-md-6 para el ancho del div en sí, lo que en esta situación significaba que el div es la mitad del tamaño, hay 1-12 col md en bootstrap.

Answer 8

Siga esta guía https://getbootstrap.com/docs/3.3/css/

Utilice .center-block

.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}