Pregunta Centre una columna usando Twitter Bootstrap 3


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

Por favor, mira el arranque violín.

<body class="container">
    <div class="col-lg-1 col-offset-6 centered">
        <img data-src="holder.js/100x100" alt="" />
    </div>
</body>

Entonces, quiero un divcon una clase centered estar centrado dentro del contenedor. Puedo usar una fila si hay varios divs, pero por ahora solo quiero un div con el tamaño de una columna centrada dentro del contenedor (12 columnas).

Tampoco estoy seguro de que el enfoque anterior sea lo suficientemente bueno ya que la intención no es compensar el div por la mitad. No necesito espacios libres fuera del div y el contenido de la div reducir en proporción. quiero espacio vacío fuera del div para ser distribuido uniformemente (reducir hasta el ancho del contenedor == una columna).


972
2017-08-09 18:24


origen


Respuestas:


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

Enfoque 1 (compensaciones):

El primer enfoque utiliza las propias clases de compensación de Bootstrap, por lo que no requiere cambios en el marcado ni CSS adicionales. La clave es establecer un desplazamiento igual a la mitad del tamaño restante de la fila. Entonces, por ejemplo, una columna de tamaño 2 se centraría agregando un desplazamiento de 5, eso es (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, solo funciona para tamaños de columna uniformes, entonces solo .col-X-2, .col-X-4, col-X-6, col-X-8 y col-X-10 son compatibles.


Enfoque 2 (el margen anterior: automático)

Usted puede centrar cualquier tamaño de columna usando el probado margin: 0 auto; técnica, solo tiene que ocuparse de la flotación que se agrega con el sistema de grillas de Bootstrap. Recomiendo definir una clase de CSS personalizada como la siguiente:

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

Ahora puede agregarlo a cualquier tamaño de columna en cualquier tamaño de pantalla y funcionará perfectamente con el diseño receptivo de Bootstrap:

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

Nota: Con ambas técnicas puedes saltearte .row elemento y tener la columna centrada dentro de una .container pero notaría una diferencia mínima en el tamaño real de la columna debido al relleno en la clase contenedor.


Actualizar:

Desde v3.0.1 Bootstrap tiene una clase incorporada llamada center-block que usa margin: 0 auto pero falta float:none. Puede agregar eso a su CSS para que funcione con el sistema de grillas.


1745
2017-08-09 18:45



El método preferido de columnas de centrado es usar "compensaciones" (es decir: col-md-offset-3)

Ejemplos de centrado Bootstrap 3.x

por elementos de centrado, hay un center-block  clase de ayuda.

También puedes usar text-center a texto central (y elementos en línea).

Manifestación: http://bootply.com/91632

EDITAR - Como se menciona en los comentarios, center-block trabaja en el contenido de la columna y display:block elementos, pero no funcionará en la columna en sí (col-* divs) porque Bootstrap usa float.


Actualización 2018

Ahora con Bootstrap 4, el centrado los métodos han cambiado ...

  • text-centertodavía se usa para display:inline elementos
  • mx-auto reemplaza center-block centrar display:block elementos
  • offset-*  o  mx-auto se puede usar para centrar columnas de cuadrícula

mx-auto (márgenes automáticos del eje x) se centrarán display:block o display:flex elementos que tienen una ancho definido, (%, vw, px, etc.). Flexbox se usa por defecto en columnas de cuadrícula, por lo que también hay varios métodos de centrado de flexbox.

Manifestación Bootstrap 4 Centrado horizontal

Para centrado vertical en BS4 ver  https://stackoverflow.com/a/41464397/171456


244
2017-12-03 18:12



Ahora Bootstrap 3.1.1 está trabajando con .center-blocky esta clase de ayuda funciona con el sistema de columna.

Bootstrap 3 Helper Class Center.

por favor, compruebe esta jsfiddle DEMO:

<div class="container">
    <div class="row">
        <div class="center-block">row center-block</div>
    </div>
    <div class="row">
        <div class="col-md-6 brd">
            <div class="center-block">1 center-block</div>
        </div>
        <div class="col-md-6 brd">
            <div class="center-block">2 center-block</div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-xs-2 col-center-block">row col-xs-2 col-center-block</div>
</div>

Helper classes center

Centro de columna de fila usando col-center-block clase de ayuda.

.col-center-block {
    float: none;
    display: block;
    margin: 0 auto;
    /* margin-left: auto; margin-right: auto; */
}

90
2018-03-18 06:31



Simplemente agregue esto a su archivo CSS personalizado, no se recomienda editar directamente los archivos CSS de Bootstrap y cancela su capacidad para usar un cdn.

.center-block {
    float: none !important
}

¿Por qué? 

Bootstrap CSS (Ver 3.7 y versiones anteriores) utiliza: margen: 0 auto;, pero queda anulado por la propiedad flotante del contenedor de tamaño.

PD: Después de agregar esta clase, no olvide configurar las clases en el orden correcto.

<div class="col-md-6 center-block">Example</div>

50
2017-12-15 03:12



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

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

Si todavía está utilizando 2.X, simplemente agregue esto a su CSS.


37
2017-08-09 18:39



Mi enfoque para las columnas centrales es usar display: inline-block para columnas y text-align: center para el contenedor padre.

Solo tienes que agregar la clase CSS 'centrada' al row.

HTML:

<div class="container-fluid">
  <div class="row centered">
    <div class="col-sm-4 col-md-4">
        Col 1
    </div>
    <div class="col-sm-4 col-md-4">
        Col 2
    </div>
    <div class="col-sm-4 col-md-4">
        Col 3
    </div>
  </div>
</div>

CSS:

.centered {
   text-align: center;
   font-size: 0;
}
.centered > div {
   float: none;
   display: inline-block;
   text-align: left;
   font-size: 13px;
}

JSfiddle: http://jsfiddle.net/steyffi/ug4fzcjd/


31
2018-02-16 10:27



Oreja la versión 3 tiene una clase .text-center.

Solo agrega esta clase:

text-center

Simplemente cargará este estilo:

.text-center {
    text-align: center;
}

Ejemplo:

<div class="container-fluid">
  <div class="row text-center">
     <div class="col-md-12">
          Bootstrap 4 is coming....
      </div>
  </div>
</div>   

25
2017-07-16 14:20



Esto funciona. Una manera hackish probablemente, pero funciona muy bien. Fue probado para responder (Y).

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

Desktop

Responsive


11
2017-08-09 21:47