CSS Aligner le bouton à droite

«Aligner le bouton droit signifie que nous définissons le bouton sur le côté droit de la page. L'alignement concerne le réglage du texte ou du bouton à différentes positions. Il décrit la position de notre texte et de nos boutons, que nous souhaitions aligner notre texte ou notre bouton à droite de la page ou de la gauche ou du centre. Dans CSS, comme nous pouvons aligner notre texte comme celui-ci, nous pouvons aligner les boutons à gauche, à droite et au centre de la page en utilisant différentes propriétés. CSS fournit différentes propriétés pour l'alignement des boutons. Nous pouvons aligner les boutons où nous voulons. Dans ce tutoriel, nous expliquerons tout sur le bon alignement de notre bouton en utilisant des propriétés alternatives dans CSS. Nous fournissons différents codes dans lesquels nous utilisons des propriétés alternatives pour aligner un bouton à droite."

Propriétés pour aligner le bouton droit dans CSS

• Utilisation de la propriété Text-Align.
• Utilisation de la propriété flottante.
• Utilisation de la propriété Justify-Contin.

Exemple n ° 1: Alignez le bouton correct à l'aide de la propriété Text-Align

Créez votre fichier HTML pour la création du bouton et pour aligner ce bouton, nous devons créer le CSS. Nous allons élaborer sur les exemples donnés dans notre studio de code visuel. Nous devons donc générer le fichier HTML, et le code de ce fichier HTML est collé ci-dessous dans l'image.

Ici, nous avons créé deux boutons différents et nous souhaitons ensuite aligner un bouton à droite afin que vous puissiez facilement apprendre la différence entre le bouton d'origine et le bouton d'alignement droit. Donc, pour cet alignement des boutons, nous devons utiliser la propriété CSS Text-Align. Lorsque nous utilisons cette propriété sur le bouton que nous avons créé, le bouton définit sa position sur le côté droit de la page. Dans le fichier CSS, vous pouvez voir comment utiliser cette propriété.

Code CSS

Ici, le code CSS est également donné ci-dessous. Nous utilisons CSS pour donner du style ou donner un alignement à nos boutons. Dans ce code, vous pouvez voir que nous utilisons la propriété «Text-Align».

Tout d'abord, nous utilisons le «.»Et le nom de notre premier bouton, qui est« BTN-Original »ici, et à l'intérieur des accolades bouclées de ce premier bouton, nous utilisons la propriété« Text-Align »et la définissons sur la« gauche.«Nous écrivons le titre du deuxième bouton, qui est« BTN-droite », en mettant. "" Encore une fois à l'intérieur des accolades bouclées, nous utilisons à nouveau la même propriété, et cette fois, nous alignons le bouton sur le côté "droit" de la page ou de l'écran.

Sortir:

La sortie affiche deux boutons dans lesquels le bouton d'origine s'affiche sur le côté gauche, puis le bouton est déplacé vers le côté droit de l'écran.

Exemple n ° 2: Alignez le bouton correct à l'aide de la propriété Float

Dans ce fichier html, nous concevons à nouveau deux boutons. Le nom du premier bouton est «bouton» ici, et le nom du deuxième bouton est «bouton droit."Dans cet exemple, nous allons utiliser une autre propriété pour aligner le bouton à droite. La propriété que nous utilisons dans le CSS de ce code est la propriété «flottante». Il fonctionne de la même manière que la propriété «Text-Align».

Code CSS

Dans ce fichier CSS, nous utilisons la propriété float. La propriété flottante dans CSS est utilisée pour flotter l'élément ou l'objet ou le bouton vers les côtés droite et gauche. Le ".Original »est utilisé pour appliquer le design sur le bouton« original ». À l'intérieur, nous appliquons la propriété «flottante» et la définissons sur la «gauche», de sorte que le bouton d'origine est placé dans le coin gauche de l'écran. À l'intérieur de ".Bouton à droite, nous définissons le «droit» sur la propriété «flottante». Cela placera notre deuxième bouton dans le coin droit de l'écran.

Sortir

Dans l'image ci-dessus, le bouton est aligné dans le coin droit de l'écran. Ici, nous avons utilisé la propriété «flottante», et vous pouvez le voir affiche la sortie de la même manière que la propriété «Text-Align» montrée.

Exemple n ° 3: Alignez le bouton correct en utilisant la propriété Justify-Content

Dans le troisième exemple, nous créons un seul bouton en utilisant la classe Div, puis utilisons la troisième propriété de CSS, qui est la propriété «Justify-Contin». Cette propriété aligne également le bouton à gauche ou à droite, mais nous devons aligner le bouton uniquement à droite

Code CSS

Dans ce fichier CSS, nous modifions également la couleur «arrière-plan» en «rose» et définissons le «rembourrage» sur «10px» en haut et en bas et «0» pour la droite et la gauche. L'exposition que nous utilisons ici est «flex», puis utilisez la troisième propriété de CSS qui est «justifier-contenu» et la définissez sur «Flex-End», donc ce «Flex-End» définit le bouton à droite fin.

Sortir

La couleur de fond est rose ici, car nous utilisons la «couleur fond» pour «rose."Le bouton est à la bonne extrémité car nous utilisons la propriété" Justify-Centent "dans notre fichier CSS de cet exemple.

Exemple n ° 4

Dans ce quatrième exemple, nous avons créé six boutons différents en utilisant la classe de bouton dans HTML. Maintenant, nous utilisons différentes couleurs pour les six boutons et alignons trois boutons sur la «droite» en utilisant la propriété CSS, et trois sont à l'endroit d'origine, qui est «à gauche», où nous n'utilisons aucune propriété.

Code CSS

La couleur du premier bouton est «vert» et le code est «# 4CAF50». Nous n'avons pas besoin de frontière, donc la frontière est «Aucune.«La« couleur »du texte écrit à l'intérieur de ces boutons est« blanc."Les paddages supérieurs et inférieurs sont" 15px ", et les paddages gauche et droit sont" 32px ". Le «Text-Align» est centré, de sorte que le texte à l'intérieur du bouton apparaît au centre du bouton. La «décoration de texte» est également «aucune."La" taille de police "est définie sur" 16px ". Les marges supérieure et inférieure sont «4px» et les marges droite et gauche sont «2px». Le «pointeur» est là pour être utilisé comme un «curseur."

Ensuite, nous alignons ce bouton à droite, nous avons donc le «flotteur» ici, qui est réglé sur la «droite.«De plus, modifiez la couleur du bouton suivant et appliquez« rouge »ici, et n'utilisez aucune propriété pour aligner le bouton, donc par défaut, ce bouton s'affiche sur le côté gauche. Le quatrième bouton, «fond de fond», est blanc, nous modifions donc également la «couleur» du texte en «noir» et flottons ce quatrième bouton vers la droite. Après avoir changé la couleur des cinquième et sixième boutons en gris, nous utilisons à nouveau «flotter: à droite» avec le sixième bouton. Vérifions comment il affichera ces boutons sur le navigateur.

Sortir

Dans cette sortie, nous avons six boutons dans lesquels trois boutons sont rendus sur le côté droit où nous utilisons la propriété «Float."Donc, avec l'aide de cette propriété, trois boutons flottent sur le côté droit. Et aussi, trois boutons sont sur le côté gauche, car nous n'avons utilisé aucune propriété pour ces trois boutons. Les couleurs de ces boutons sont également différentes.

Conclusion

Ce tutoriel a discuté des trois propriétés que le CSS fournit pour aligner le bouton dans le coin droit de l'écran. Nous avons expliqué en détail les trois propriétés de CSS qui sont des propriétés «adignes textuelles», «flottantes» et «justifier». Nous avons généré trois exemples différents, et nous avons appliqué les propriétés alternatives dans chaque exemple et affiché la sortie de tous les codes également, afin que vous puissiez facilement obtenir ce point sur la façon d'aligner le bouton à droite. Ce tutoriel vous aidera à aligner votre bouton sur le côté droit en utilisant les propriétés de CSS.