Les images constituent une partie importante de toute application Web. Il n'est généralement pas recommandé d'inclure de nombreuses images dans une application Web, mais il est important d'utiliser les images partout où cela est nécessaire. CSS nous aide à contrôler l'affichage des images dans les applications Web.
Aligner une image signifie positionner l’image au centre, à gauche et à droite. Nous pouvons utiliser le flotter la propriété et aligner le texte propriété pour l’alignement des images.
Si l'image est dans l'élément div, alors nous pouvons utiliser le aligner le texte propriété pour aligner l’image dans le div.
Exemple
Dans cet exemple, nous alignons les images en utilisant le aligner le texte propriété. Les images sont dans l'élément div.
div { border: 2px solid red; } img{ height: 250px; width: 250px; } #left { text-align: left; } #center { text-align: center; } #right{ text-align: right; } <img src="//techcodeview.com/img/css-tutorial/50/how-align-images-css.webp"> <img src="//techcodeview.com/img/css-tutorial/50/how-align-images-css.webp"> <img src="//techcodeview.com/img/css-tutorial/50/how-align-images-css.webp"> Testez-le maintenant Sortir
Utilisation de la propriété float
La propriété CSS float est une propriété de positionnement. Il est utilisé pour pousser un élément vers la gauche ou la droite, permettant ainsi à d'autres éléments de s'enrouler autour de lui. Il est généralement utilisé avec des images et des mises en page.
Les éléments flottent uniquement horizontalement. Il est donc possible uniquement de faire flotter les éléments vers la gauche ou la droite, pas vers le haut ou vers le bas. Un élément flottant peut être déplacé le plus à gauche ou à droite possible. Simplement, cela signifie qu'un élément flottant peut s'afficher à l'extrême gauche ou à l'extrême droite.
Exemple
img{ height: 200px; width: 250px; border: 7px ridge blue; } #left{ float: left; } #right{ float: right; } <img src="//techcodeview.com/img/css-tutorial/50/how-align-images-css.webp" id="left"> <img src="//techcodeview.com/img/css-tutorial/50/how-align-images-css.webp" id="right"> Testez-le maintenant Sortir
langage Java de base
