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>