Imagen sensible alinear centro bootstrap 3
Hago un catálogo usando Bootstrap 3. Cuando se muestran en tabletas, las imágenes del producto se ven feas debido a su pequeño tamaño (500x500) y un ancho de 767 píxeles en el navegador. Quiero poner la imagen en el centro de la pantalla, pero por alguna razón no puedo. ¿Quién ayudará a resolver el problema?
15 answers
Si está utilizando Bootstrap v3.0.1 o superior, debe usar esta solución en su lugar. No anula los estilos de Bootstrap con CSS personalizado, sino que utiliza una función de Bootstrap.
Mi respuesta original se muestra a continuación para la posteridad
Esta es una solución agradablemente fácil. Debido a que .img-responsive desde Bootstrap ya establece display: block, puede usar margin: 0 auto para centrar la imagen:
.product .img-responsive {
margin: 0 auto;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-05-23 12:26:38
Hay .center-block clase en Twitter Bootstrap 3 (Desde v3.0.1), así que use:
<img src="..." alt="..." class="img-responsive center-block" />
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-03-09 13:07:54
Agregue solo la clase center-block a una imagen, esto también funciona con Bootstrap 4:
<img src="..." alt="..." class="center-block" />
Nota: center-block funciona incluso cuando se usa img-responsive
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-08-23 07:56:55
Solo usa la clase .text-center si estás usando Bootstrap 3.
<div class="text-center">
<img src="..." alt="..."/>
</div>
Nota: Esto no funciona con img-responsive
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-05-02 14:57:46
Esto debería centrar la imagen y hacerla sensible.
<img src="..." class="img-responsive" style="margin:0 auto;"/>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-06-05 15:22:03
Sugeriría una clasificación más "abstracta". Añadir una nueva clase "img-center" que se puede utilizar en combinación con .img-clase sensible:
// Center responsive images
.img-responsive.img-center {
margin: 0 auto;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-11-27 15:01:53
Todavía puede trabajar con img-responsive sin afectar otras imágenes con esta clase de estilo.
Puede preceder esta etiqueta con la sección id/ div id/class para definir un orden dentro del cual se anida este img. Esta costumbre img-responsive funcionará solo en esa área.
Supongamos que tiene un área HTML definida como:
<section id="work">
<div class="container">
<div class="row">
<img class="img-responsive" src="some_image.jpg">
</div>
</div>
</section>
Entonces, tu CSS puede ser:
section#work .img-responsive{
margin: 0 auto;
}
Nota: Esta respuesta está en relación con el impacto potencial de alterar img-responsive como un todo. Por supuesto, center-block es el más simple solución.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-11-05 15:34:44
Prueba esto:
.img-responsive{
display: block;
height: auto;
max-width: 100%;
margin:0 auto;
}
.Image{
background:#ccc;
padding:30px;
}<div class="Image">
<img src="http://minisoft.com.bd/uploads/ourteam/rafiq.jpg" class="img-responsive" title="Rafique" alt="Rafique">
</div>Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-08-02 10:10:42
@media (max-width: 767px) {
img {
display: table;
margin: 0 auto;
}
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-08-27 10:29:11
Para agregar a las respuestas ya dadas, tener el img-responsive en combinación con img-thumbnail establecerá display: block a display: inline block.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-11-08 12:22:49
<div class="col-md-12 text-center">
<img class="img-responsive tocenter" />
</div>
.
<style>
.tocenter {
margin:0 auto;
display: inline;
}
</style>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-02-19 17:21:56
Pruebe este código también funcionará para iconos pequeños con bootstrap 4 porque no hay ninguna clase de bloque central es bootstrap 4, así que pruebe este método que será útil. Puede cambiar la posición de la imagen configurando .col-md-12 a .col-md-8 o .col-md-4, depende de usted.
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="text-xs-center text-lg-center">
<img src="" class="img-thumbnail">
</div>
</div>
</div>
</div>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-11-23 16:41:44
Puede arreglarlo definiendo el margen: 0 auto
O puede usar col-md-offset también
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<style>
.img-responsive{
margin:0 auto;
}
</style>
<body>
<div class="container">
<h2>Image</h2>
<div class="row">
<div class="col-md-12">
<p>The .img-responsive class makes the image scale nicely to the parent element (resize the browser window to see the effect):</p>
<img src="http://www.w3schools.com/bootstrap/cinqueterre.jpg" class="img-responsive" alt="Cinque Terre" width="304" height="236">
</div>
</div>
</div>
</body>
</html>Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-07-14 12:34:19
La forma más exacta aplicada a todos los objetos Booostrap usando solo clases estándar sería no establecer los márgenes superior e inferior (ya que la imagen puede heredarlos del padre), por lo que siempre estoy usando:
.text-center .img-responsive {
margin-left: auto;
margin-right: auto;
}
También he hecho una idea para eso, por lo que si se aplican cambios debido a errores, la versión de actualización siempre estará aquí: https://gist.github.com/jdrda/09a38bf152dd6a8aff4151c58679cc66
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-01-04 09:02:18
Hasta ahora la mejor solución a aceptar parece ser <img class="center-block" ... />. Pero nadie ha mencionado cómo funciona center-block.
Tome Bootstrap v3.3.6 por ejemplo:
.center-block {
display: block;
margin-right: auto;
margin-left: auto;
}
El valor predeterminado de dispaly para <img> es inline. Value block mostrará un elemento como un elemento de bloque (como <p>). Comienza en una nueva línea, y ocupa todo el ancho. De esta manera, los dos ajustes de margen permiten que la imagen permanezca en el medio horizontalmente.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-07-30 20:43:03