Aligner les images IMAGES:Alignement

Les classes .float-right et .float-left permettent d’aligner à droite et à gauche, les images dans une même colonne d’une grille.

Voici le code de cet exemple simple :

<div class="row"> 
        <div class="col"> 
                <img src="dorsoduro-01.jpg" class="float-left" 
alt="Dorsoduro à Venise"> 
                <img src="dorsoduro-02.jpg" class="float-right" 
alt="Dorsoduro à Venise"> 
        </div> 
</div> 

Voici l’affichage obtenu sur un écran de taille moyenne :

images/C05-004.png

Voici les règles CSS des classes utilisées :

.float-left { 
        float: left!important; 
} 
.float-right { 
        float: right!important; 
} 

Vous pouvez centrer une image avec la classe .text-center appliquée à la colonne <div class="col text-center"> :

<div class="row"> 
        <div class="col text-center"> 
                <img src="dorsoduro-03.jpg" class="rounded" 
alt="Dorsoduro à Venise"> 
        </div> 
</div> 

Voici l’affichage obtenu sur un écran...

Pour consulter la suite, découvrez le livre suivant :
couv_OW24BOO.png
60-signet.svg
En version papier
20-ecran_lettre.svg
En version numérique
41-logo_abonnement.svg
En illimité avec l'abonnement ENI
130-boutique.svg
Sur la boutique officielle ENI
Précédent
Les bordures de l'image
Suivant
Les sources des images