Comment centrer parfaitement une image dans Bootstrap à l'aide de .center-block ?

Alignement parfait d'une image avec Bootstrap

Lors de l'utilisation du framework Bootstrap, centrer une image horizontalement peut être un peu un défi. Cependant, il existe une solution simple en utilisant la classe intégrée .center-block.

Classe CSS : .center-block

La classe .center-block, introduit dans Twitter Bootstrap v3.0.3, centre les blocs de contenu horizontalement en utilisant la marge. Il peut être utilisé comme mixin ou comme classe.

Utilisation

Pour centrer une image à l'aide de .center-block, ajoutez simplement la classe à la balise img :

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

CSS

La classe .center-block a les propriétés CSS suivantes :

<code class="css">.center-block {
    display: block;
    margin-left: auto;
    margin-right: auto;
 }</code>

Ces propriétés définissent l'image à afficher comme un élément de bloc et centrez-le sur la page en appliquant des marges égales des deux côtés.

Exemple

Vous pouvez voir un exemple en direct d'une image centrée en utilisant .center- bloquer sur : [exemple d'URL ici]

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!