¿Cómo puedo centrar un div con la clase Bootstrap un 'Spanx'?

Por cierto, si tu span clase pares (por ejemplo, span8) puede agregar un offset clase a centro de ella - span8 que estaría offset2 (suponiendo que el valor predeterminado de 12 columna de la cuadrícula), para span6 sería offset3 , y así sucesivamente (básicamente, la mitad el número de columnas restantes, si se restan los span-número de el número total de columnas de la cuadrícula).

ACTUALIZACIÓN Bootstrap 3 cambiado el nombre de un montón de clases para todos los span*clases debe ser col-md-* y a las offset clases debe ser col-md-offset-*, suponiendo que usted está utilizando la mediana de cuadrícula de respuesta.

He creado una rápida demostración aquí, espero que ayude: http://codepen.io/anon/pen/BEyHd.

Si alguien quiere la verdadera solución para el centrado de imágenes y texto dentro de un lapso de uso de bootstrap de la fila-líquido, aquí es (cómo implementar esto y la explicación que sigue mi ejemplo):

css

div.row-fluid [class*="span"] .center-in-span { 
   float: none; 
   margin: 0 auto; 
   text-align: center; 
   display: block; 
   width: auto; 
   height: auto;
}

html

<div class="row-fluid">
   <div class="span12">
      <img class="center-in-span" alt="MyExample" src="/path/to/example.jpg"/>
   </div>
</div>

<div class="row-fluid">
   <div class="span12">
      <p class="center-in-span">this is text</p>
   </div>
</div>

USO: El uso de este css para centrar una imagen dentro de un grupo, basta con aplicar la .centro-en-span class para el elemento img, como se muestra arriba.

El uso de este css para centrar el texto dentro de un grupo, basta con aplicar la .centro-en-span class del elemento p, como se muestra arriba.

EXPLICACIÓN: Este css funciona porque nos están anulando específicos bootstrap estilo. Las notables diferencias de las otras respuestas que eran publicados son de que la anchura y la altura se establece en automático, de modo que usted no tiene que utilizar un fijo con (buena para una dinámica página web). también, la combinación de establecer el margen para auto, texto-align:center y display:block, se ocupa de las dos imágenes y de párrafos.

Quiero saber si esta es suficientemente profundo para una fácil implementación.

Actualización

Como de BS3 hay un .center-block clase auxiliar. A partir de la documentación:

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

// Usage as mixins
.element {
  .center-block();
}

Allí se oculta la complejidad de este problema aparentemente sencillo. Todas las respuestas que se han dado algunos problemas.

1. Creación de una Clase Personalizada (Principales Gotcha)

Crear .col-centred de la clase, pero hay un gran problema.

.col-centred {
   float: none !important;
   margin: 0 auto;
}

<!-- Bootstrap 3 -->
<div class="col-lg-6 col-centred">
  Centred content.
</div>
<!-- Bootstrap 2 -->
<div class="span-6 col-centred">
  Centred content.
</div>

El Gotcha

Bootstrap requiere columnas suman 12. Si no se solapan, lo que es un problema. En este caso, el centrado de la columna se superponen en la columna de encima. Visualmente la página puede parecer el mismo, pero los eventos de ratón no funcionará en la columna que se superponen (no se puede flotar o haga clic en los enlaces, por ejemplo). Esto es debido a que los eventos de ratón registrarse en el centrado de la columna que es la superposición de los elementos intentar haga clic en.

Las Correcciones

Usted puede resolver este problema mediante el uso de un clearfix elemento. Utilizando z-index para llevar el centrado de la columna a la parte inferior no funciona, debido a que se superponen a sí mismo, y, en consecuencia, los eventos de ratón se va a trabajar en él.

<div class="row">
  <div class="col-lg-12">
    I get overlapped by `col-lg-7 centered` unless there's a clearfix.
  </div>
  <div class="clearfix"></div>
  <div class="col-lg-7 centred">
  </div>
</div>

O puede aislar el centrado de la columna en su propia fila.

<div class="row">
  <div class="col-lg-12">
  </div>
</div>
<div class="row">
  <div class="col-lg-7 centred">
    Look I am in my own row.
  </div>
</div>

2. El uso de col-lg-offset-x o spanx-offset (Principales Gotcha)

<!-- Bootstrap 3 -->
<div class="col-lg-6 col-lg-offset-3">
  Centred content.
</div>
<!-- Bootstrap 2 -->
<div class="span-6 span-offset-3">
  Centred content.
</div>

El primer problema es que el centrado de la columna debe ser un número par, porque el valor de desplazamiento debe dividir uniformemente por 2 para el diseño de estar centrado (izquierda/derecha).

En segundo lugar, como algunos han comentado, el uso de compensaciones es una mala idea. Esto es porque cuando el navegador se redimensiona el desplazamiento se convertirá en un espacio en blanco, empujando el contenido real de la página.

3. Crear un Interior Centrado en la Columna

Esta es la mejor solución, en mi opinión. Hacking necesario y no se juega con la cuadrícula, lo que podría provocar consecuencias no deseadas, como por las soluciones 1 y 2.

.col-centred {
   margin: 0 auto;
}

<div class="row">
  <div class="col-lg-12">
    <div class="centred">
        Look I am in my own row.
    </div>
  </div>
</div>

Definir el ancho como 960px, o lo que usted prefiere, y ya está bueno para ir!

 #main {
 margin: 0 auto !important;
 float: none !important;
 text-align: center;
 width: 960px;
}
 

(No podía imaginar esto hasta que me fijé el ancho, nada funcionó.)