Maison > interface Web > tutoriel CSS > le corps du texte

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

Susan Sarandon
Libérer: 2024-10-27 10:02:03
original
881 Les gens l'ont consulté

How to Perfectly Center an Image in Bootstrap Using .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>
Copier après la connexion

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>
Copier après la connexion

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!