Imagen receptiva alinear bootstrap central 3

423

Hago un catálogo con 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 será ayudará a resolver el problema?

Captura de pantalla de parte de una página de producto con el producto no centrado debajo del título

html css image twitter-bootstrap alignment Konstantin Rusanov
fuente
55
Me gusta el diseño de su sitio y productos - buen trabajo:)
Bojangles
77
Otro ejemplo de "Por qué necesitamos colocar el código en el cuerpo de la pregunta".
LEQADA

Respuestas:

572

Si usa Bootstrap v3.0.1 o superior, debería usar esta solución en su lugar. No anula los estilos de Bootstrap con CSS personalizado, sino que utiliza una función Bootstrap.

Mi respuesta original se muestra a continuación para la posteridad

Esta es una solución agradablemente fácil. Debido .img-responsivea que Bootstrap ya está configurado display: block, puede usarlo margin: 0 autopara centrar la imagen:

.product .img-responsive {
    margin: 0 auto;
}
Bojangles
fuente
35
Probablemente sea mejor crear una nueva clase con margin: 0 auto, en lugar de cambiar .img-responsive.
Knite
44
Eso es un pensamiento, aunque personalmente no puedo pensar en ningún lugar donde quisiera una imagen receptiva no centrada, especialmente con este diseño. Todo depende del caso de uso y de lo que sucederá en el futuro
Bojangles
Consulte esta respuesta si está utilizando Bootstrap v4 o superior: stackoverflow.com/a/43293957/4102515
snorberhuis
1156

Hay .center-blockclase en Twitter Bootstrap 3 ( desde v3.0.1 ), así que use:

<img src="..." alt="..." class="img-responsive center-block" />
DHlavaty
fuente
27
Esta debería ser la respuesta aceptada, ya que no necesita agregar ningún CSS para usarla.
user2602152
16
class="img-responsive" style="margin: 0 auto;"funciona para mí class="img-responsive center-block"no (bootstrap 3, pero una versión de hace unos meses)
mxro
99
Align center no funciona cuando se usa img-responsive.
Ismael
1
@DHlavaty, ¿puede explicar la diferencia entre usar .img-responsive AND .center-block y simplemente usar .img-responsive con un margen automático como sugiere la respuesta aceptada? ¿Es un método más robusto?
user137717
1
Es posible que no desee usar esto si se supone que se puede hacer clic en su imagen. Es decir, si está envuelto dentro de un <a href="#"> </a>par, el área en la que se puede hacer clic se expandirá a todo el ancho del contenedor envolvente, que podría ser un poco más grande que su imagen. Esto puede confundir a los usuarios que hacen clic en lo que piensan que es un espacio "vacío".
CXJ
108

Agregue solo la clase center-blocka una imagen, esto también funciona con Bootstrap 4:

<img src="..." alt="..." class="center-block" />

Nota: center-blockfunciona incluso cuando img-responsivese usa

Harry Bosh
fuente
66
La mejor respuesta, pero subestimada. ¡Es por eso que usas un framework!
Baumannzone
Entonces. Fantástico. Gracias
AndrewLeonardi
Su trabajo
Dhiren Patel
31

Solo usa .text-centerclass si estás usando Bootstrap 3.

<div class="text-center">
    <img src="..." alt="..."/>
</div>

Nota: Esto no funciona con img-responsive

Sai Kiran Sripada
fuente
1
La pregunta es sobreimg-responsive
Alexey Kosov el
Para img-responsive, agregue img-center (probado en 3.3.6) para aquellos que puedan ver esto en las búsquedas de Google
DardanM
10

Esto debería centrar la imagen y hacer que responda.

<img src="..." class="img-responsive" style="margin:0 auto;"/>
nPcomp
fuente
6

Sugeriría una clasificación más "abstracta". Agregue una nueva clase "img-center" que se puede usar en combinación con la clase .img-responsive:

// Center responsive images
.img-responsive.img-center {
  margin: 0 auto;
}
Miguel
fuente
3 
@media (max-width: 767px) {
   img {
     display: table;
     margin: 0 auto;
   }
}
Ahmed
fuente
2
¿Por qué display: table? Ya display: blockes suficiente margin: 0 autopara trabajar
Bojangles
3

Todavía puede trabajar img-responsivesin 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 imgestá anidado. Esta costumbre img-responsivesolo funcionará 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á relacionada con el impacto potencial de la alteración img-responsiveen su conjunto. Por supuesto, center-blockes la solución más simple.

KannarKK
fuente
Esta respuesta es poco apreciada, envolver la imagen en la clase de fila es crucial para centrar la imagen cuando hay un texto debajo de la imagen.
Glenn Plas
3

Pruebe este código, también funcionará para iconos pequeños con bootstrap 4 porque no hay una clase de bloque central que sea bootstrap 4, así que pruebe este método, será útil. Puede cambiar la posición de la imagen configurando .col-md-12a .col-md-8o .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>
faseeh
fuente
3

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

Rafiqul Islam
fuente
3

Simplemente coloque todas las miniaturas de las imágenes dentro de una fila / col divs como esta:

<div class="row text-center">
 <div class="col-12">
  # your images here...
 </div>
</div>

¡y todo funcionará bien!

Ingeniería de la Energía
fuente
2

Para añadir a las respuestas ya dadas, teniendo el img-responsiveen combinación con img-thumbnailfijará display: blocka display: inline block.

M. Oranje
fuente
2 
<div class="col-md-12 text-center">
    <img class="img-responsive tocenter" />
</div>

.

<style>
   .tocenter {
    margin:0 auto;
    display: inline;
    }
</style>
usuario956584
fuente
0

Puede arreglarlo con un margen de definición: 0 automático

o puedes 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>
Expandir fragmento

Ganesh Putta
fuente
0

La forma más exacta aplicada a todos los objetos Booostrap que usan clases estándar solo 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 hice una Gist para eso, por lo que si se aplican cambios debido a algún error, la versión de actualización siempre estará aquí: https://gist.github.com/jdrda/09a38bf152dd6a8aff4151c58679cc66

LordMagik
fuente
0

Hasta ahora, la mejor solución para aceptar parece ser <img class="center-block" ... />. Pero nadie ha mencionado cómo center-blockfunciona.

Tome Bootstrap v3.3.6 por ejemplo:

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

El valor predeterminado de dispalyfor <img>es inline. El valor blockmostrará un elemento como un elemento de bloque (como <p>). Comienza en una nueva línea y ocupa todo el ancho. De esta manera, las dos configuraciones de margen permiten que la imagen permanezca en el medio horizontalmente.

campo temático
fuente