Comment centrer parfaitement une image sur une page à l'aide de la classe .center-block de Bootstrap ?

Aligner parfaitement une image au centre d'une page à l'aide de Bootstrap

Lorsque vous travaillez avec Twitter Bootstrap, centrer une image horizontalement n'est pas toujours simple. Cet article présente une solution utilisant la classe Bootstrap, .center-block, pour aligner sans effort les images au point mort avec la page.

Comprendre la classe .center-block

La classe .center-block dans Twitter Bootstrap v3.0.3 est spécialement conçu pour aligner les éléments de bloc au centre d'une page. Il définit la propriété d'affichage sur block et ajuste les marges (marge gauche et marge droite) sur auto, garantissant que l'élément est centré à la fois horizontalement et verticalement.

Alignement d'une image à l'aide de .center-block

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

<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>

La feuille de style de la classe .center-block définit ce qui suit :

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

Exemple

Pour une démonstration en direct, vous pouvez visiter ce qui suit exemple de page :

[Exemple de page](URL)

En utilisant la classe .center-block, vous pouvez facilement aligner n'importe quel point mort d'image avec la page, garantissant une mise en page visuellement agréable et équilibrée .

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!