Centre una columna usando Twitter Bootstrap

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

Por favor, mira el violín inicial.

 

Entonces, quiero un div , con una clase centered para estar centrada 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 los contenidos del div contraen en proporción. Quiero vaciar el espacio fuera del div para distribuirlo de manera uniforme (reducir hasta el ancho del contenedor == una columna).

Hay dos enfoques para centrar una columna

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í:

 

Ahora, hay un inconveniente obvio para este método, solo funciona para tamaños de columnas pares , por lo que 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)

Puede centrar cualquier tamaño de columna usando el margin: 0 auto; comprobado 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:

 

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


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.

El método preferido para centrar columnas es usar “offsets” (es decir: col-md-offset-3 )

Ejemplos de centrado Bootstrap 3.x

Para los elementos de centrado , hay una clase de ayuda de center-block .

También puede usar text-center de texto para centrar el texto (y los elementos en línea).

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

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


Actualización 2018

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

  • text-center todavía se usa para la display:inline elementos en display:inline
  • mx-auto reemplaza center-block central a display:block central display:block elementos de display:block
  • offset-* o mx-auto se pueden usar para centrar columnas de cuadrícula

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

Demo Bootstrap 4 Centrado horizontal

Para el centrado vertical en BS4, consulte https://stackoverflow.com/a/41464397/171456

Ahora Bootstrap 3.1.1 está trabajando con .center-block , y esta clase de ayuda funciona con el sistema de columnas.

Bootstrap 3 Helper Class Center .

Por favor revise esta jsfiddle DEMO :

 
row center-block
1 center-block
2 center-block
row col-xs-2 col-center-block

Centro de clases de ayuda

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

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

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: margin: 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.

 
Example

Bootstrap 3 ahora tiene una clase incorporada para este .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.

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

Solo tienes que agregar la clase CSS ‘centrada’ a la row .

HTML:

 
Col 1
Col 2
Col 3

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/

Bootstrap versión 3 tiene una clase .text-center.

Solo agrega esta clase:

 text-center 

Simplemente cargará este estilo:

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

Ejemplo:

 
Bootstrap 4 is coming....

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

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

Escritorio

Sensible

Puede usar text-center de text-center para la fila y asegurarse de que los divs internos tengan display:inline-block (sin float )

como:

 
A red block
A white block
A yellow block

y css:

 .redBlock { width: 100px; height: 100px; background-color: aqua; display: inline-block } .whiteBlock { width: 100px; height: 100px; background-color: white; display: inline-block } .yellowBlock { width: 100px; height: 100px; background-color: yellow; display: inline-block } 

El violín: http://jsfiddle.net/DTcHh/3177/

Simplemente configure su columna que muestra el contenido en col-xs-12 (mobile-first 😉 y configure el contenedor solo para controlar qué tan ancho quiere que sea su contenido centrado, así:

 .container { background-color: blue; } .centered { background-color: red; } 
  

Para centrar la col- necesitamos usar el siguiente código. cols son elementos flotantes además del margen automático. También lo configuraremos para que no flote ninguno,

  

Para centrar el col-lg-1 anterior con la clase de centrado, escribiremos:

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

Para centrar el contenido dentro del div, usa text-align:center ,

 .centered { text-align: center; } 

Si desea centrarlo solo en el escritorio y en una pantalla más grande, no en el móvil, utilice la siguiente consulta de medios.

 @media (min-width: 768px) { .centered { float: none; margin-left: auto; margin-right: auto; } } 

Y para centrar el div solo en la versión móvil, use el siguiente código.

 @media (max-width: 768px) { .centered { float: none; margin-left: auto; margin-right: auto; } } 

Probablemente esta no sea la mejor respuesta, pero hay una solución más creativa para esto. Como lo señala koala_dev, la compensación de columna funciona solo para tamaños de columna pares. Sin embargo, al anidar filas, también puedes lograr el centrado de columnas desiguales.

Para seguir con la pregunta original donde desea centrar una columna de 1 dentro de una cuadrícula de 12.

  1. Centre una columna de 2 al compensarla 5
  2. Haga una fila anidada, de modo que obtenga una nueva 12 columnas dentro de sus 2 columnas.
  3. Como quiere centrar una columna de 1, y 1 es “la mitad” de 2 (lo que centramos en el paso 1), ahora necesita centrar una columna de 6 en la fila anidada, lo que se hace fácilmente compensándola 3.

Por ejemplo:

 
centered column with that has an "original width" of 1 col

Vea este violín , tenga en cuenta que debe boost el tamaño de la ventana de salida para ver también el resultado, de lo contrario, las columnas se ajustarán.

Otro enfoque de compensación es tener dos filas vacías, por ejemplo:

 
Centered Content
 

Podemos lograr esto usando el mecanismo de disposición de tabla:

El mecanismo es:

  1. Ajustar todas las columnas en un div.
  2. Haz que div sea una tabla con un diseño fijo.
  3. Haga que cada columna sea una celda de tabla.
  4. Utilice la propiedad de alineación vertical para controlar la posición del contenido.

La demostración de muestra está aquí

Ingrese la descripción de la imagen aquí

Como koala_dev usó en su aproximación 1, preferiría el método de compensación en lugar del bloque central o los márgenes que tiene un uso limitado, pero como mencionó:

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

Esto se puede resolver usando el siguiente enfoque para columnas impares.

 
// Your content here

Puede usar la solución flexible Flexbox para su Bootstrap.

 justify-content: center; 

puede centrar tu columna

Echa un vistazo a flex .

Con Bootstrap v4, esto se puede lograr agregando .justify-content-center a .row

 
centered 1 column

https://getbootstrap.com/docs/4.0/utilities/flex/#justify-content

Como nunca tuve la necesidad de centrar solo un .col- dentro de .row , configuré la siguiente clase en el .row de mis columnas de destino.

 .col-center > [class*="col-"] { float: none; margin-left: auto; margin-right: auto; } 

Ejemplo

 
Foo
Bar

Para aquellos que buscan centrar los elementos de columna en la pantalla cuando no tiene el número exacto para llenar su cuadrícula, he escrito una pequeña porción de JavaScript para devolver los nombres de clase:

 function colCalculator(totalNumberOfElements, elementsPerRow, screenSize) { var arrayFill = function (size, content) { return Array.apply(null, Array(size)).map(String.prototype.valueOf, content); }; var elementSize = parseInt(12 / elementsPerRow, 10); var normalClassName = 'col-' + screenSize + '-' + elementSize; var numberOfFittingElements = parseInt(totalNumberOfElements / elementsPerRow, 10) * elementsPerRow; var numberOfRemainingElements = totalNumberOfElements - numberOfFittingElements; var ret = arrayFill(numberOfFittingElements, normalClassName); var remainingSize = 12 - numberOfRemainingElements * elementSize; var remainingLeftSize = parseInt(remainingSize / 2, 10); return ret.concat(arrayFill(numberOfRemainingElements, normalClassName + ' col-' + screenSize + '-push-' + remainingLeftSize)); } 

Si tiene 5 elementos y quiere tener 3 por fila en una pantalla md , haga esto:

 colCalculator(5, 3, 'md') >> ["col-md-4", "col-md-4", "col-md-4", "col-md-4 col-md-push-2", "col-md-4 col-md-push-2"] 

Tenga en cuenta que el segundo argumento debe ser divisible por 12.

Para centrar más de una columna en una fila Bootstrap, y el número de cols es impar, simplemente agregue esta clase css a todas las columnas en esa fila:

 .many-cols-centered { // To horizontally center bootstrap odd cols, eg col-lg-9, col-md-3, works well in lg display:inline-block; float:none; } 

Entonces en tu HTML tienes algo como:

 

You See

I love coding.

You See

I love coding.

You See

I love coding.

Este no es mi código, pero funciona perfectamente (probado en Bootstrap 3) y no tengo que perder el col-offset.

Manifestación:

 /* centered columns styles */ .row-centered { text-align: center; } .col-centered { display: inline-block; float: none; /* reset the text-align */ text-align: left; /* inline-block space fix */ margin-right: -4px; text-align: center; background-color: #ccc; border: 1px solid #ddd; } 
 
Column 6
Column 6
Column 3
Column 3
Column 3

Si coloca esto en su fila, todas las columnas dentro estarán centradas:

 .row-centered { display: flex; justify-content: space-between; } 

Prueba esto

 

Puede usar otro col así como col-md-2 , etc.

Para ser más precisos, el sistema de grillas de Bootstrap contiene 12 columnas y, para centrar cualquier contenido, digamos que, por ejemplo, el contenido ocupa una columna. Uno tendrá que ocupar dos columnas de la cuadrícula de Bootstrap y colocar el contenido en la mitad de las dos columnas ocupadas.

 
... your content / data will come here ...

‘col-xs-offset-5’ le está diciendo al sistema de cuadrícula dónde comenzar a colocar el contenido.

‘col-xs-2’ le dice al sistema de cuadrícula cuántas de las columnas sobrantes debería ocupar el contenido.

‘centrado’ será una clase definida que centrará el contenido.

Así es como se ve este ejemplo en el sistema de grillas de Bootstrap.

Columnas:

1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12

……. offset ……. .data. …….no utilizado……..

Prueba este código

  

Aquí he usado col-lg-1, y el desplazamiento debe ser 10 para dividir adecuadamente el div en dispositivos grandes, si lo necesitas para centrar en mediam en un dispositivo grande, entonces simplemente cambia el lg a md y así sucesivamente, házmelo saber si hay algún problema

¡No olvides agregar !important . Entonces puedes estar seguro de que ese elemento realmente estará en el centro:

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

Método 1:

 
YOUR CONTENT

Método 2:

CSS

 .float-center{float: none;} 
YOUR CONTENT

Bootstrap Consejos, ejemplos y herramientas: OnAirCode

Sugiero simplemente usar el text-center la clase:

  
    Intereting Posts