Responsive image align center bootstrap 3

Hago un catálogo usando Bootstrap 3. Cuando se muestra en las tabletas, las imágenes de los productos se ven feos 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 puede ayudar a resolver el problema?

Nick Chapman
Pregunta editada 12º julio 2017 в 7:29
Programación
image html css twitter-bootstrap alignment
27º agosto 2013 в 10:20
13 vistas
Solución

Si utiliza Bootstrap v3.0.1 o superior, debería utilizar 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

Este es un arreglo agradablemente fácil. Como .img-responsive de Bootstrap ya establece display: block, puedes usar margin: 0 auto para centrar la imagen:

.product .img-responsive {
    margin: 0 auto;
}
Community
Respuesta editada 23º mayo 2017 в 12:26
Comentarios (3)
 
@media (max-width: 767px) {
   img {
     display: table;
     margin: 0 auto;
   }
}
Comentarios (1)

Para añadir a las respuestas ya dadas, tener el img-responsive en combinación con el img-thumbnail hará que display: block se convierta en display: inline block.

Comentarios (0)