Centrar una columna usando Twitter Bootstrap 3

1146

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

.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>
Expandir fragmento

Quiero un div, con una clase .centeredcentrada dentro del contenedor. Puedo usar una fila si hay múltiples divs, pero por ahora solo quiero una divcon 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 compensarlo a la divmitad. No necesito espacios libres fuera divy el contenido del divencogimiento en proporción. Quiero vaciar el espacio fuera del div para distribuirlo uniformemente (reducir hasta que el ancho del contenedor sea igual a una columna).

css  twitter-bootstrap  twitter-bootstrap-3  centering 
— bsr
fuente

Respuestas:

1963

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

Enfoque 1 (compensaciones):

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 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 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 los tamaños de las columnas, incluso , por lo que sólo .col-X-2, .col-X-4, col-X-6, col-X-8, y col-X-10son compatibles.

Enfoque 2 (el viejo margin:auto)

Puede centrar cualquier tamaño de columna utilizando la margin: 0 auto;técnica probada . Solo necesita cuidar la flotabilidad que agrega el sistema de cuadrícula de Bootstrap. Recomiendo definir una clase 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, puede omitir el .rowelemento y tener la columna centrada dentro de a .container, pero notará una diferencia mínima en el tamaño real de la columna debido al relleno en la clase de contenedor.

Actualizar:

Desde v3.0.1 Bootstrap tiene una clase incorporada llamada center-blockque usa margin: 0 auto, pero falta float:none, puede agregarla a su CSS para que funcione con el sistema de cuadrícula.

— koala_dev
fuente
1
Creo que no hay flotante: ninguno en la regla de bloque central porque hay una regla independiente de corrección clara que puede agregar a los elementos para borrar flotantes.
— Diego Fernando Murillo Valenci
77
@DiegoFernandoMurilloValenci .clearfixno funcionaría en este caso porque no elimina la propiedad flotante de los elementos (que se necesita para centrar el uso margin: 0 auto), solo hace que un contenedor envuelva cualquier elemento flotante dentro
— koala_dev
44
no puedo usar esto en una columna, porque nofloat:none;
— airtonix
2
Si desea centrar más de una columna en una sola línea, consulte esta respuesta stackoverflow.com/questions/28683329/…
— Conor Svensson
3
La sintaxis para el desplazamiento cambió en Bootstrap4 (a partir de la última versión). Usando esta respuesta como ejemplo: la clase col-md-offset-5 ahora debería ser offset-md-5.
— lgants
296

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

Ejemplos de centrado de Bootstrap 3.x

Para centrar elementos , hay una center-block clase auxiliar .

También puede usar text-centerpara centrar texto (y elementos en línea).

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

EDITAR : como se menciona en los comentarios,center-blockfunciona en los contenidos ydisplay:blockelementos de lacolumna, pero no funcionará en la columna en sí (col-*divs) porque usa Bootstrapfloat.

Actualización 2018

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

  • text-centertodavía se usa para display:inlineelementos
  • mx-autoreemplaza center-blocka los display:blockelementos centrales
  • offset-* o mx-auto puede usarse para centrar columnas de cuadrícula

mx-auto(márgenes de auto-eje X) se centrarán display:blocko display:flexelementos que tienen una anchura definida , ( %, vw, px, etc ..). Flexbox se usa por defecto en las columnas de la 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

— Zim
fuente
31
Lamentablemente, esta clase auxiliar no funciona con el sistema de columnas, ya que no se ocupa de la propiedad flotante. Vea esta demostración por ejemplo.
— koala_dev
13
Eso solo requiere un bloque central {float: none; }, y funciona. bootply.com/122268
— Matias Vad
55
No estoy seguro sobre el OP, pero llegué aquí buscando los text-centerdetalles, que ninguna de las otras respuestas proporcionó. Éste tiene mi voto.
— domoarigato
1
no puedo usar esto en una columna, porque nofloat:none;
— airtonix
98

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

Bootstrap 3 Helper Class Center .

Por favor, compruebe esta DEMO jsfiddle :

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

Centro de clases de ayuda

Centro de columna de fila usando col-center-blockclase auxiliar.

.col-center-block {
    float: none;
    display: block;
    margin: 0 auto;
    /* margin-left: auto; margin-right: auto; */
}
— Remitente
fuente
Lo hice funcionar sin agregar, float:noneasegurándome de que el bloque central div tenga el style="width : ?px"estilo aplicado. Por ejemplo, un ancho de imagen. Funciona con 3.2.2
— Piotr Kula
margen: 0 automático; - suficiente margen-izquierda + margen-derecha
— mmike
57

Simplemente agregue lo siguiente a su archivo CSS personalizado. No se recomienda editar directamente archivos CSS de Bootstrap y cancela su capacidad de usar un CDN .

.center-block {
    float: none !important
}

¿Por qué?

Bootstrap CSS (versión 3.7 y versiones anteriores) utiliza el margen: 0 automático; , pero se invalida por la propiedad flotante del contenedor de tamaño.

PD :

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

<div class="col-md-6 center-block">Example</div>
— SEO sagivo
fuente
1
¡Estoy usando Bootstrap 3.3.7y este es el único método que funciona para mí!
— illagrenan
1
esto funciona. pero no creo que !importantsea necesario
— Gianfranco P.
1
@GianfrancoP. P. Tiene razón, pero ... eso depende del orden de carga y quería proporcionar un método infalible.
— Sagive SEO
39

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

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

Si todavía usa 2.X, simplemente agregue esto a su CSS.

— Schmalzy
fuente
Esto probablemente le daría el efecto deseado más fácil. También agregue ancho en la clase .centrado o agregue una segunda clase si desea un enfoque más modular
— Matt Lambert el
2
Agregar flotador: ninguno; to .centered te permite mover la clase a un contenedor. mantiene el código más limpio
— Adam Patterson
77
no se puede usar esto en una columna, porque nofloat:none;
— airtonix
37

Mi enfoque para centrar columnas es usar display: inline-blockpara columnas y text-align: centerpara el contenedor primario.

Solo tiene 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/

— Steffi
fuente
2
Esta es la única respuesta que funcionó el 100% del tiempo: los demás funcionaron, pero no cuando bootstrap cambió a su vista móvil (los elementos se movieron hacia el lado izquierdo).
— Levi Fuller
Este fue el único que también me funcionó, .center-block solo funciona para una columna y necesito centrar todas las columnas independientemente de cuántas sean.
— cjohansson
La única solución que funcionó para mí también. Otros solo funcionaban cuando el navegador era una ventana (no a pantalla completa).
— kiwicomb123
26

Oreja 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>
— RustyIngles
fuente
¿Aclara dónde se agregará esta clase?
— aksu
Hola @aksu, no tienes que agregar ningún .css. Mira el ejemplo proporcionado.
— JoshYates1980
15

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

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

Escritorio

Sensible

— Ali Gajani
fuente
funciona solo porque el elemento tiene diplay en línea. Un imgpuede establecerse como un bloque.
— ProfileTwist
Quizás en su caso de prueba aislado. Añadiría .centered img { display: inline; }a su respuesta y, en su lugar, merecería un voto positivo.
— ProfileTwist
No hay problema. Estoy seguro de que el OP encontrará su respuesta :)
— Ali Gajani
en bootstrap 3, la clase .text-center hace lo mismo de forma nativa, como aprendí anteriormente.
— domoarigato
7 
<div class="container-fluid">
    <div class="row">
        <div class="col-lg-4 col-lg-offset-4">
            <img src="some.jpg">
        </div>
    </div>
</div>
— wali
fuente
6

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

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

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, use text-align:center,

.centered {
    text-align: center;
}

Si desea centrarlo solo en el escritorio y la 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;
    }
}
— Aamer Shahzad
fuente
6

Simplemente configure su columna que muestra el contenido en col-xs-12 (mobile-first ;-) y configure el contenedor solo para controlar qué tan ancho desea que sea su contenido centrado, por lo tanto:

.container {
  background-color: blue;
}
.centered {
    background-color: red;
}
<body class="container col-xs-offset-3 col-xs-6">
    <div class="col-xs-12 centered">
        <img data-src="holder.js/100x100" alt="" />
    </div>
</body>
Expandir fragmento

<body class="container col-xs-offset-1 col-xs-10">
    <div class="col-xs-12 centered">
        <img data-src="holder.js/100x100" alt="" />
    </div>
</body>
Expandir fragmento

Para una demostración, consulte http://codepen.io/Kebten/pen/gpRNMe :-)

— Kieran Ryan
fuente
6

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

<div class="col-md-4"></div>
<div class="col-md-4">Centered Content</div>
<div class="col-md-4"></div>
— LeRoy
fuente
1
2 divs inútiles, col-md-offset- * es mejor
— ymakux
1
Estoy de acuerdo. Usé ese método porque realmente funciona bien y lo probé.
— LeRoy
6

Puede usar text-centerpara la fila y puede asegurarse de que los div internos tengan display:inline-block(con no float).

Como:

<div class="container">
    <div class="row text-center" style="background-color : black;">
        <div class="redBlock">A red block</div>
        <div class="whiteBlock">A white block</div>
        <div class="yellowBlock">A yellow block</div>
    </div>
</div>

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/

— Alireza Fattahi
fuente
6

Con Bootstrap 4 simplemente puedes probar justify-content-md-centercomo se menciona aquí

<div class="container">
    <div class="row justify-content-md-center">
        <div class="col col-lg-2">
              1 of 3
        </div>
        <div class="col-md-auto">
            Variable width content
        </div>
        <div class="col col-lg-2">
              3 of 3
        </div>
    </div>
    <div class="row">
        <div class="col">
             1 of 3
        </div>
        <div class="col-md-auto">
                Variable width content
        </div>
        <div class="col col-lg-2">
              3 of 3
        </div>
    </div>
</div>

ingrese la descripción de la imagen aquí

— Hossein Narimani Rad
fuente
1
@AdamErickson La pregunta formulada específicamente para una solución bootstrap 3. Como esta respuesta es probablemente el camino a seguir en BS4, en 2019 algunos programas todavía usan bootstrap 3.
— A1rPun
5

Probablemente esta no sea la mejor respuesta, pero hay una solución creativa más para esto. Como señaló koala_dev, la compensación de columnas funciona solo para tamaños de columna pares. Sin embargo, al anidar filas también puede lograr centrar 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, para obtener 12 columnas nuevas dentro de sus 2 columnas.
  3. Como desea 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 su fila anidada, lo que se hace fácilmente al compensarla 3.

Por ejemplo:

<div class="container">
  <div class="row">
    <div class="col-md-offset-5 col-md-2">
      <div class="row">
        <div class="col-md-offset-3 col-md-6">
          centered column with that has an "original width" of 1 col
        </div>
      </div>
    </div>
  </div>
</div>

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

— reinder
fuente
5

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

Manifestación:

/* centered columns styles */

.col-centered {
  display: inline-block;
  float: none;
  /* inline-block space fix */
  margin-right: -4px;
  background-color: #ccc;
  border: 1px solid #ddd;
}
<div class="container">
  <div class="row text-center">
    <div class="col-xs-6 col-centered">Column 6</div>
    <div class="col-xs-6 col-centered">Column 6</div>
    <div class="col-xs-3 col-centered">Column 3</div>
    <div class="col-xs-3 col-centered">Column 3</div>
    <div class="col-xs-3 col-centered">Column 3</div>
  </div>
</div>
Expandir fragmento

— Binar Web
fuente
4

Podemos lograr esto usando el mecanismo de diseño de la tabla:

El mecanismo es:

  1. Envuelva todas las columnas en un div.
  2. Haga ese div como una tabla con un diseño fijo.
  3. Haga cada columna como una celda de tabla.
  4. Use 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í

— Mohan Dere
fuente
4

Agregue el siguiente fragmento dentro de su .row o su .col. Esto es para Bootstrap 4 *.

d-flex justify-content-center
— Thomas Chirwa
fuente
3

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

Ahora, hay un inconveniente obvio para este método, solo funciona para tamaños de columna uniformes, 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 utilizando el siguiente enfoque para columnas impares.

<div class="col-xs-offset-5 col-xs-2">
    <div class="col-xs-offset-3">
        // Your content here
    </div>
</div>
— Abhinav Singh
fuente
3

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

justify-content: center;

Puede centrar su columna.

Echa un vistazo a flex .

— Duro
fuente
2

Como nunca tengo la necesidad de centrar solo uno .col-dentro de a .row, configuro la siguiente clase en el ajuste .rowde mis columnas de destino.

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

Ejemplo

<div class="full-container">
    <div class="row col-center">
        <div class="col-xs-11">
            Foo
        </div>
        <div class="col-xs-11">
            Bar
        </div>
    </div>
</div>
— Walter Roman
fuente
2

Para aquellos que buscan centrar los elementos de la columna en la pantalla cuando no tienen el número exacto para llenar su cuadrícula, he escrito un pequeño fragmento de JavaScript para devolver los nombres de las clases:

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 desea tener 3 por fila en una mdpantalla, 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.

— jsgoupil
fuente
2

Para centrar más de una columna en una fila Bootstrap, y el número de columnas es impar, simplemente agregue esta cssclase a todas las columnas de 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:

<div class="row text-center"> <!-- text-center centers all text in that row -->
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 many-cols-centered">
        <img src='assets/image1.jpg'>
        <h3>You See</h3>
        <p>I love coding.</p>
    </div>
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 many-cols-centered">
        <img src='assets/image2.jpg'>
        <h3>You See</h3>
        <p>I love coding.</p>
    </div>
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 many-cols-centered">
        <img src='assets/image3.jpg'>
        <h3>You See</h3>
        <p>I love coding.</p>
    </div>
</div>
— Ruto Collins
fuente
2

Prueba esto

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

Puedes usar otros colcomo col-md-2, etc.

— Ch UmarJamil
fuente
2

Sugiero simplemente usar la clase text-center:

<body class="container">
    <div class="col-md-12 text-center">
        <img data-src="holder.js/100x100" alt="" />
    </div>
</body>
— Dadhich Sourav
fuente
2

Prueba este código.

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

Aquí he usado col-lg-1, y el desplazamiento debería ser 10 para centrar adecuadamente el div en dispositivos grandes. Si necesita que se centre en dispositivos medianos a grandes, simplemente cambie lg a md y así sucesivamente.

— Bangash
fuente
2

Solución Bootstrap 4 :

<div class="container">
  <div class="row">
    <div class="col align-self-center">
      Column in the middle, variable width
    </div>
  </div>
</div>
— JanBrus
fuente
1

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

.row-centered {
    display: flex;
    justify-content: space-between;
}
— Eran Shabi
fuente
hizo que el elemento no respondiera.
— gfivehost
1

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

<div class="row">
   <div class="col-xs-2 col-xs-offset-5 centered">
      ... your content / data will come here ...
   </div>
</div>

'col-xs-offset-5' le dice al sistema de cuadrícula dónde comenzar a colocar el contenido.

'col-xs-2' le dice al sistema de cuadrícula cuántas 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 cuadrícula de Bootstrap.

Columnas:

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

....... desplazamiento ....... datos. .......no utilizado........

— Tecnología
fuente
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.