css - imagenes - how to center an image bootstrap
Centrar una columna usando Twitter Bootstrap (29)
¿Cómo centrar un div de un tamaño de columna dentro del contenedor (12 columnas) en Twitter Bootstrap 3?
Por favor vea el fiddle arranque.
<body class="container">
<div class="col-lg-1 col-offset-6 centered">
<img data-src="holder.js/100x100" alt="" />
</div>
</body>
Por lo tanto, quiero un div , con una clase centrada en el 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 la div a la mitad. No necesito espacios libres fuera del div y los contenidos del div reducen en proporción. Quiero vaciar el espacio fuera del div para que se distribuya uniformemente (reducir hasta el ancho del contenedor == una columna).
Podemos lograr esto mediante el mecanismo de diseño de tabla:
El mecanismo es:
- Envuelve todas las columnas en una div.
- Hacer que div como una tabla con un diseño fijo.
- Hacer cada columna como una celda de tabla.
- Use la propiedad de alineación vertical para controlar la posición del contenido.
La muestra de muestra está here
Ahora Bootstrap 3.1.1 está trabajando con .center-block , y esta clase auxiliar funciona con el sistema de columnas.
Centro de clase auxiliar de Bootstrap 3.
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 la columna de la fila utilizando la clase de ayudante col-center-block .
.col-center-block {
float: none;
display: block;
margin: 0 auto;
/* margin-left: auto; margin-right: auto; */
}
Como koala_dev utilizó en su enfoque 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 columna iguales, 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>
Como nunca tengo la necesidad de centrar solo un único .col- dentro de un .row , establezco la siguiente clase en el envoltorio .row de 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>
Con Bootstrap v4, esto se puede lograr simplemente agregando .justify-content-center a .row <div>
<div class="row justify-content-center">
<div class="col-1">centered 1 column</div>
</div>
https://getbootstrap.com/docs/4.0/utilities/flex/#justify-content
El método preferido para centrar las columnas es usar "desplazamientos" (es decir, col-md-offset-3 )
Bootstrap 3.x centrado de ejemplos
Para los elementos de centrado , hay una clase auxiliar de center-block .
También puede utilizar text-center de texto para centrar el texto (y los elementos en línea).
Demostración : http://bootply.com/91632
EDITAR - Como se mencionó en los comentarios, center-block funciona en el contenido de la columna y display:block elementos del display:block , pero no funcionará 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-centertodavía se utiliza para ladisplay:inlineelementos endisplay:inline -
mx-autoreemplazacenter-blockcentral al centro de ladisplay:blockelementos dedisplay:block -
offset-*omx-autose puede usar para centrar las columnas de la cuadrícula
mx-auto (los márgenes del eje x automáticos) centrarán la display:block o display:flex elementos display:flex que tienen un ancho definido , ( % , vw , px , etc.). Flexbox se utiliza de forma predeterminada 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://.com/a/41464397/171456
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 */
.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;
}
<div class="container">
<div class="row row-centered">
<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>
Esto funciona. Probablemente sea una forma de hackers, pero funciona bien. Fue probado para respuesta (Y).
.centered {
background-color: teal;
text-align: center;
}
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 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, que es (12-2)/2 .
En el marcado esto se vería como:
<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 .col-X-2 , 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: auto)
Puede centrar cualquier tamaño de columna utilizando el margin: 0 auto; comprobado margin: 0 auto; En esta técnica, solo debe cuidar la flotación que agrega el sistema de rejilla 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á sin problemas con el diseño sensible de Bootstrap:
<div class="row">
<div class="col-lg-1 col-centered"></div>
</div>
Nota: Con ambas técnicas, puede omitir el elemento .row y centrar la columna dentro de un .container embargo, 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-block que usa el margin: 0 auto pero falta float:none . Puede agregar eso a su CSS para que funcione con el sistema de cuadrícula.
Mi enfoque para centrar las columnas es usar display: inline-block para columnas y text-align: center para el contenedor primario.
Solo debes agregar la clase CSS ''centrada'' a la 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/
No te olvides de añadir !important . Entonces puedes estar seguro de que ese elemento realmente estará en el centro:
.col-centered{
float: none !important;
margin: 0 auto !important;
}
Otro enfoque de la 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>
Para aquellos que buscan centrar los elementos de la columna en la pantalla cuando no tiene 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 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 entre 12.
Para centrar la columna, necesitamos usar el siguiente código. Los cols son elementos flotantes además de margen auto. También lo pondremos a flotar 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 en una pantalla más grande, no en dispositivos móviles, utilice la siguiente consulta de medios.
@media (min-width: 768px) {
.centered {
float: none;
margin-left: auto;
margin-right: auto;
}
}
Y para centrar la división 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;
}
}
Para centrar más de una columna en una fila Bootstrap - y el número de columnas 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;
}
Así que 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>
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. Uno tendrá que 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 indica 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.
Aquí es cómo se ve este ejemplo en el sistema de rejilla de Bootstrap.
Columnas:
1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
....... offset ....... .data. .......no utilizado........
Probablemente esta no sea la mejor respuesta, pero hay una solución creativa más para esto. Como lo señaló koala_dev, la compensación de columnas funciona solo para tamaños de columna iguales. Sin embargo, al anidar filas también puede lograr centrar columnas desiguales.
Para continuar con la pregunta original, donde desea centrar una columna de 1 dentro de una cuadrícula de 12.
- Centrar una columna de 2 al desplazarla 5
- Haga una fila anidada, de modo que obtenga 12 nuevas columnas dentro de sus 2 columnas.
- Ya que 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 su fila anidada, lo que se hace fácilmente compensándolo 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 el resultado; de lo contrario, las columnas se ajustarán.
Prueba este código.
<body class="container">
<div class="col-lg-1 col-lg-offset-10">
<img data-src="holder.js/100x100" alt="" />
</div>
Aquí he usado col-lg-1, y el desplazamiento debe ser 10 para centrar correctamente la división en dispositivos grandes, si necesita centrar en mediam a dispositivo grande, simplemente cambie el lg a md y así sucesivamente, avíseme Si hay algún problema.
Prueba esto
<div class="row">
<div class="col-xs-2 col-xs-offset-5"></div>
</div>
Puedes usar otra col como col-md-2 , etc.
Puede usar text-center de text-center para la fila y asegurarse de que los divs internos tengan display:inline-block (sin 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/
Puede utilizar la solución flexible muy flexible para su Bootstrap.
justify-content: center;
puede centrar su columna.
Echa un vistazo a flex .
Si pones esto en tu fila, todas las columnas dentro estarán centradas:
.row-centered {
display: flex;
justify-content: space-between;
}
Simplemente agregue esto a su archivo CSS personalizado, no se recomienda editar los archivos CSS de Bootstrap directamente y cancela su capacidad para usar un cdn.
.center-block {
float: none !important
}
¿Por qué?
Bootstrap CSS (Ver 3.7 e inferior) utiliza: margen: 0 auto; , pero se anula por la propiedad float 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>
Simplemente configure su única columna que muestre el contenido en col-xs-12 (mobile-first ;-) y configure el contenedor solo para controlar qué tan amplio desea que sea su contenido centrado, así que:
.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>
<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>
Para ver una demostración, consulte http://codepen.io/Kebten/pen/gpRNMe :-)
Sugiero simplemente usar el text-center la clase:
<body class="container">
<div class="col-md-12 text-center">
<img data-src="holder.js/100x100" alt="" />
</div>
</body>
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:
<div class="container-fluid">
<div class="row text-center">
<div class="col-md-12">
Bootstrap 4 is coming....
</div>
</div>
</div>
Bootstrap 3 ahora tiene una clase incorporada para este .center-block
.center-block {
display: block;
margin-left: auto;
margin-right: auto;
}
Si aún está utilizando 2.X, simplemente agregue esto a su CSS.
Método 1:
<div class="container">
<div class="row">
<div class="col-md-2 col-md-offset-5">
YOUR CONTENT
</div>
</div>
</div>
Método 2:
CSS
.float-center{float: none;}
<div class="container">
<div id="mydev" class="center-block float-center" style="width:75%;">
YOUR CONTENT
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-lg-4 col-lg-offset-4">
<img src="some.jpg">
</div>
</div>
</div>