Bootstrap : comment aligner une image responsive au centre ?
Le framework CSS fournit une classe pour gérer une image en responsive design, qui s'adaptera à la taille de l'écran.
Le framework CSS Bootstrap fournit la classe "img-responsive" qui permet de gérer une image responsive, qui s'adapte à la taille de la fenêtre. Pour qu'une image responsive soit alignée au centre, il y a deux possibilités.
La première consiste à ajouter la propriété "margin" en CSS et à lui attribuer la valeur "auto" pour les marges horizontales. Avec une valeur égale à "auto", les marges sont calculées automatiquement de manière à centrer l'élément :
.img-responsive .centree {
margin: 0 auto;
}
La deuxième solution est d'utiliser la classe "center-block" fournie par Bootstrap depuis la version 3.0.1. Cette classe centre l'élément horizontalement en utilisant la propriété "margin" avec comme valeur "auto" :
<img src="image.png" alt="image" class="img-responsive center-block" />