¿Cómo centrar un div con Bootstrap2?

84

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>

nmeros de intervalo y desplazamiento cambiados ...

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 la caja es demasiado ancha, ¿hay alguna forma de que pueda hacerlo con span7?

span7 offset2le da un acolchado adicional a la izquierda span7 offset3acolchado adicional a la derecha ...

css twitter-bootstrap twitter-bootstrap-2

— Alex
fuente

¿Está buscando centrar un cuadro horizontalmente en la página? Debido a que la containerclase ya hace eso, pensé que podría estar buscando centrar un cuadro más pequeño. ¿O está buscando centrar un cuadro tanto horizontal como verticalmente en la página?

— Andres Ilich

14

una caja que dices? . . . .aquí en el mundo de los desarrolladores lo llamamos div

— pythonian29033

¿Qué versión de Bootstrap estaba usando? debería reflejarse en el título, ya que las personas que busquen esto terminarán aquí y verán un código desactualizado.

— JGallardo

46

además de la reducción de la div sí al tamaño que desee, reduciendo el tamaño de 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 busca

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

— csturtz
fuente

12

Considere la respuesta de Zuhaib Ali. text-align: center no funciona para centrar elementos dentro de un <div>. La clase de desplazamiento * no es realmente componentes de centrado. Simplemente está creando la ilusión de centrarse. Puede verificar esto cambiando el tamaño de la ventana y viendo que los componentes no permanecen centrados. Cuando aplica el método de Zuhaib Ali, los componentes permanecen centrados.

— BigSauce

En lugar de agregar estilo en línea (style = "text-align: center"), agregue la clase "center-block" y obtenga contenido centrado dentro de su div centrado.

— Shawn Taylor

col-md-4 o col-lg-4 es igual a un margen: 0 automático; ?

— jruzafa

165

Los tramos 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 para comenzar.

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

Tenga en cuenta que esta clase de centro personalizado debe definirse después de bootstrap css. Podría usar, !importantpero eso no es recomendable.

— Zuhaib Ali
fuente

5

¡SI! ¡Gracias, Zuhaib! Funcionó perfectamente. Esta respuesta debe votarse como la respuesta correcta para esta pregunta.

— BigSauce

@ZuhaibAli Añadiendo float: none;arreglar mi problema.

— SIFE

1

Estoy usando Rails, así que solo quiero señalar que en application.css, agregue *= require bootstrap.min antes *= require_self y*= require_tree

2

Esto no funcionó para mí, pero agregar display: tableparecía solucionarlo

— Peter Berg

1

¡Gran respuesta! Trabajando con esto de ahora en adelante.

— serv-bot 22 de

34

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

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

Documentación aquí .

— Casey
fuente

20

Si desea realizar un arranque completo (y no la forma automática 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>

— Craig
fuente

¿Es esa una forma válida de centrar divs en boostrap?

— Gavindra Kalikapersaud

1

El contenido del div no está centrado, pero el div en sí sí lo está.

— Craig

8

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 .containerdiv bootstrap .

— cstrat
fuente

3

agregar el contenido del centro de clase

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

— mrpix
fuente

0

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.

— jakson
fuente

0

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

Utilizar .center-block

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

— core114
fuente

0

envuelva el div en un div principal con la clase y rowluego agregue estilo margin:0 auto;al div

<div class="row">
  <div style="margin: 0 auto;">center</div>
</div>

— Mahmoud Farahat
fuente