Comment centrer un bouton à l'aide de CSS Flexbox

Dans HTML, les boutons sont des éléments cliquables utilisés pour effectuer une action spécifique. En utilisant CSS, vous pouvez définir la position du bouton où vous souhaitez le placer. Pour ce faire, il existe plusieurs techniques dans CSS, l'une d'entre elles est Flexbox. "fléchir"Est utilisé pour définir la position de l'élément en fonction de sa fenêtre.

Cet article apprendra à centrer un bouton à l'aide de CSS Flexbox.

Alors, commençons!

Comment centrer le bouton à l'aide de CSS Flexbox?

"fléchir»Est la valeur définie pour la propriété d'affichage de CSS. Selon la taille de la fenêtre, il définit du contenu ou des éléments en conséquence. Dans CSS, la valeur flexible crée un espace égal entre les éléments pour s'assurer qu'ils sont organisés efficacement.

Syntaxe

Dans la syntaxe donnée ci-dessus, "fléchir«Sera spécifié comme la valeur du«afficher" propriété.

Alors, vérifions l'exemple pour centraliser le bouton à l'aide de Flex.

Exemple

Dans le HTML, nous créerons un conteneur avec une classe nommée «bouton»Et à l'intérieur, créez un bouton à l'aide de la balise:

Dans le fichier CSS, ".bouton”Est ​​utilisé pour accéder à la classe que nous avons affectée au . Pour définir la position du bouton ajouté au centre de la div, nous attribuerons la valeur de la propriété d'affichage, justifier-contenu et align-items comme «fléchir","centre", et "centre", respectivement. De plus, nous définirons la hauteur du div créé à «200px»Et attribuez la valeur de la frontière comme«5px","solide" et "noir»:

Dans le code ci-dessus, "justifier"Est utilisé pour régler le bouton au centre de la div horizontalement et"align-item«Est utilisé pour régler le bouton au centre de la div verticalement.

Après implémentation du code ci-dessus, accédez au fichier HTML et exécutez-le pour voir le résultat suivant:

Vous pouvez voir que le bouton est affiché avec succès au centre de la div.

Conclusion

Pour centrer le bouton, vous pouvez utiliser le «afficher","align-item", et "justifier»Propriétés de CSS. Ces propriétés vous permettent de définir le bouton au centre de la div ou de tout élément lorsque vous spécifiez la valeur de la propriété d'affichage comme «fléchir», Aligner-Item et justifier-contenu comme«centre". Dans cet article, nous avons expliqué comment centrer le bouton en utilisant Flexbox à l'aide d'un exemple approprié.