Centrar una columna con Twitter Bootstrap 3

¿Cómo puedo centrar un div de un tamaño de columna dentro del contenedor (12 columnas) en Twitter Bootstrap 3?

begin snippet: js hide: false console: true babel: false -->

.centered {
  background-color: red;
}
<body class="container">
  <div class="col-lg-1 col-offset-6 centered">
    <img data-src="holder.js/100x100" alt="" />
  </div>
</body>

Fin del fragmento;

Quiero que un div, con clase .centered esté centrado dentro del contenedor. Puede que use una fila si hay varios divs, pero por ahora sólo quiero un div con el tamaño de una columna centrado dentro del contenedor (12 columnas).

Tampoco estoy seguro de que el enfoque anterior sea lo suficientemente bueno, ya que la intención no es desplazar el div a la mitad. No necesito espacios libres fuera del div y el contenido del div se reduce en proporción. Quiero que el espacio libre fuera del div se distribuya uniformemente** (que se encoja hasta que el ancho del contenedor sea igual a una columna).

daaawx
Pregunta editada 17º marzo 2019 в 7:03
Programación
css twitter-bootstrap-3 twitter-bootstrap centering
9º agosto 2013 в 6:24
29 vistas
Solución

Hay dos enfoques para centrar una columna <div> en Bootstrap 3:

Aproximación 1 (desplazamientos):

El primer enfoque utiliza las propias clases de desplazamiento de Bootstrap, por lo que no requiere ningún cambio en el marcado ni CSS adicional. La clave está en poner un offset igual a la mitad del tamaño restante de la fila. Así, por ejemplo, una columna de tamaño 2 se centraría añadiendo un offset de 5, es decir (12-2)/2.

En el marcado esto se vería así:

<div class="row">
    <div class="col-md-2 col-md-offset-5"></div>
</div>

Ahora, hay un inconveniente obvio para este método. Sólo funciona para tamaños de columna pares, por lo que sólo son compatibles .col-X-2, .col-X-4, col-X-6, col-X-8 y col-X-10.

Enfoque 2 (el antiguo margin:auto)

Puedes centrar cualquier tamaño de columna utilizando la probada técnica margin: 0 auto;. Sólo tienes que cuidar de la flotación que se añade por Bootstrap's sistema de rejilla. Recomiendo definir una clase CSS personalizada como la siguiente:

.col-centered{
    float: none;
    margin: 0 auto;
}

Ahora puedes añadirla a cualquier tamaño de columna en cualquier tamaño de pantalla, y funcionará perfectamente con el diseño responsivo de Bootstrap&#39:

<div class="row">
    <div class="col-lg-1 col-centered"></div>
</div>

Nota:** Con ambas técnicas podrías omitir el elemento .row y tener la columna centrada dentro de un .container, pero notarías una mínima diferencia en el tamaño real de la columna debido al relleno de la clase container;

Actualización:

Desde la v3.0.1 Bootstrap tiene una clase incorporada llamada center-block que utiliza margin: 0 auto, pero le falta float:none, puedes añadirla a tu CSS para que funcione con el sistema de rejilla.

Peter Mortensen
Respuesta editada 4º marzo 2019 в 3:00
Comentarios (20)

Bootstrap 3 tiene ahora una clase incorporada para este .center-block.

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

Si usted todavía está usando 2.X entonces sólo tiene que añadir esto a su CSS.

Schmalzy
Respuesta editada 24º marzo 2014 в 8:24
Comentarios (3)

Esto funciona. Una forma de hacking probablemente, pero funciona bien. Fue probado para responder (Y).

.centered {
    background-color: teal;
    text-align: center;
}

Peter Mortensen
Respuesta editada 30º junio 2016 в 4:01
Comentarios (5)