84 votos

¿Cómo centrar un div con Bootstrap?

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

He probado 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 tramo y de desplazamiento...

Pero no puedo conseguir una simple caja perfectamente centrada en una página :(

Sólo quiero una caja de 6 columnas centrada...


editar:

lo hizo 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 hacerlo con span7?

span7 offset2 da un relleno extra a la izquierda span7 offset3 el relleno extra a la derecha...

165voto

Zuhaib Ali Puntos 1588

Los vanos de Bootstrap están flotados a la izquierda. Todo lo que se necesita para centrarlos es anular este comportamiento. Lo hago añadiendo esto a mi hoja de estilos:

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

Si tienes esta clase definida, sólo tienes que añadirla al span y ya está.

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

Tenga en cuenta que esta clase de centro personalizado debe ser definida después de el css de bootstrap. Puedes usar !important pero no es recomendable.

46voto

csturtz Puntos 1364

además de reducir el propio div al tamaño que quieras, reduciendo el tamaño del span así... class="span6 offset3" , class="span4 offset4" etc... algo tan simple como style="text-align: center" en la div podría tener el efecto que buscas

no se puede usar span7 con cualquier desplazamiento establecido y obtener el span centrado en la página (Porque el total de spans = 12)

21voto

Craig Puntos 4714

Si quieres ir de lleno en el bootstrap (y no de la manera automática izquierda/derecha) necesitas 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. Sólo cubre el -md- variantes, tiendo a ajustarlo a tamaño completo para los pequeños añadiendo col-xs-12

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

8voto

strat Puntos 699

Parece que sólo querías centrar la alineación de un solo contenedor. El marco de bootstrap podría estar complicando demasiado ese ejemplo, usted podría haber tenido un div independiente con su propio estilo, algo así:

<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) */
}

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

3voto

mrpix Puntos 31

añadir la clase centercontents

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

Iteramos.com

Iteramos es una comunidad de desarrolladores que busca expandir el conocimiento de la programación mas allá del inglés.
Tenemos una gran cantidad de contenido, y también puedes hacer tus propias preguntas o resolver las de los demás.

Powered by:

X