Comment centrer verticalement une image dans Bootstrap ?

Comment centrer une image verticalement dans Bootstrap

Le centrage horizontal d'une image dans Bootstrap peut être réalisé de différentes manières.

Méthode 1 : Utilisation de la classe Center-Block

Twitter Bootstrap v3.0.3 introduit la classe center-block à cet effet. Il définit l'élément à afficher : bloquer et le centre via la marge.

Pour utiliser cette méthode :

1. Ajoutez le bloc central de la classe à la balise img :

<code class="html"><img class="center-block" src="logo.png" /></code>

Méthode 2 : Utilisation du système de grille

Vous pouvez également utiliser le système de grille Bootstrap pour diviser la ligne en trois blocs égaux :

<code class="html"><div class="row">
  <div class="col-4"></div>
  <div class="col-4"><img src="logo.png" /></div>
  <div class="col-4"></div>
</div></code>

Cette méthode centrera également l'image horizontalement dans la ligne.

Pour centrer l'image verticalement, vous pouvez également utiliser CSS pour définir l'image pour qu'elle affiche un bloc en ligne et lui fournir une marge supérieure égale à la moitié de la hauteur de l'image :

<code class="css">img {
  display: inline-block;
  margin-top: -(image-height / 2);
}</code>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!