Aligner l'image à droite en CSS

1. Utilisez les propriétés float et clear pour aligner une image à droite sur une ligne en CSS
2. Utilisez les propriétés display et margin-left pour aligner une image à droite sur une ligne en CSS

Cet article discutera de certaines méthodes pour aligner l’image à droite en CSS.

Utilisez les propriétés float et clear pour aligner une image à droite sur une ligne en CSS

Nous pouvons utiliser la propriété float pour spécifier la position flottante de l’élément en CSS.

Par exemple, lorsque nous insérons une image en HTML et écrivons un paragraphe sous l’image, nous pouvons faire flotter l’image à gauche ou à droite du paragraphe. De cette manière, nous pouvons faire apparaître le texte à côté de l’image.

Nous pouvons définir la propriété float sur right pour aligner l’image à droite d’un paragraphe en CSS. Mais, si nous devons pousser le paragraphe sous l’image, la propriété clear nous sera utile.

La propriété définit le flux de l’élément sous l’élément flottant. L’élément sera poussé sous l’image flottante de droite lors de l’utilisation de l’option right pour la propriété clear.

Ainsi, nous pouvons aligner à droite une image et commencer le paragraphe à partir de la ligne suivante. Il y aura un espace vide à gauche de l’image.

Par exemple, insérez une image en utilisant la balise img en HTML. À côté de la balise img, écrivez une balise p et remplissez-la avec du texte.

Sélectionnez la balise img dans CSS et appliquez la propriété float. Définissez l’option right sur la propriété float. Ensuite, sélectionnez la balise p et définissez la propriété clear sur right.

Ici, l’image sera alignée à droite de la page Web. Il n’y aura pas de texte à côté de l’image.

Si nous n’avions pas utilisé la propriété clear, le texte apparaîtrait sur le côté gauche de l’image. Nous avons poussé le texte sous l’image en utilisant la propriété clear.

Nous pouvons également définir l’option both pour la propriété clear. Il poussera l’élément suivant sous les éléments flottants gauche et droit.

Exemple de code :

<img src="/img/DelftStack/logo.png" />
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis nihil, vitae placeat molestias inventore, numquam eveniet illo optio, sint excepturi nam? Ut dolor ratione aut tenetur, a aliquid natus tempore!
</p>

img{
 float:right;
}

p{
 clear:right;
}

Utilisez les propriétés display et margin-left pour aligner une image à droite sur une ligne en CSS

Dans cette méthode, nous discuterons d’une autre façon d’aligner l’image à droite et de pousser le texte sur une autre ligne.

Nous pouvons atteindre notre objectif en utilisant les propriétés display et margin-left. Nous pouvons utiliser la propriété margin-left pour définir la marge à gauche de l’image et pousser l’image vers la droite sur la page Web.

Nous pouvons y parvenir avec l’option auto. Nous pouvons forcer le texte à la ligne suivante en définissant l’image comme élément de bloc. On peut le faire avec la propriété display.

Dans cet exemple, nous utiliserons la structure HTML utilisée dans la première méthode. Par exemple, sélectionnez la balise img et définissez la propriété margin-left sur auto. Ensuite, appliquez l’option block à la propriété display.

Ici, l’option auto définira la marge gauche de l’image. L’image prendra l’espace en fonction de sa taille.

Ensuite, le navigateur calculera l’espace restant et définira cet espace comme marge de gauche. Par conséquent, l’image est alignée à droite.

Définir la propriété display sur block rendra l’élément de niveau bloc. Cela signifie que l’image occupera toute la ligne.

L’élément suivant de l’image sera poussé à la ligne suivante. Par conséquent, nous pouvons utiliser les propriétés display et margin-left à droite pour aligner l’image et déplacer le texte à la ligne suivante.

Exemple de code :

img {
 margin-left: auto;
 display: block;
}