Je réalise un catalogue en utilisant Bootstrap 3. Lorsqu'elles sont affichées sur des tablettes, les images des produits sont laides en raison de leur petite taille (500x500) et d'une largeur de 767 pixels dans le navigateur. Je veux mettre l'image au centre de l'écran, mais pour une raison quelconque, je ne peux pas. Qui peut m'aider à résoudre ce problème ?
! [entrez la description de l'image ici] [1]
Si vous utilisez Bootstrap v3.0.1 ou une version plus récente, vous devriez plutôt utiliser [cette solution] (https://stackoverflow.com/a/20396826/383609). Elle ne remplace pas les styles de Bootstrap par un CSS personnalisé, mais utilise une fonctionnalité de Bootstrap.
Ma réponse originale est affichée ci-dessous pour la postérité.
Il s'agit d'une correction facile et agréable. Parce que .img-responsive
de Bootstrap définit déjà display : block
, vous pouvez utiliser margin : 0 auto
pour centrer l'image :
.product .img-responsive {
margin: 0 auto;
}