TechCodeview

CSS est principalement utilisé pour fournir le meilleur style à la page Web HTML. En utilisant CSS , nous pouvons spécifier la disposition des éléments sur la page.

Il existe différentes méthodes pour aligner le bouton au centre de la page Web. Nous pouvons aligner les boutons horizontalement comme verticalement. Nous pouvons centrer le bouton en utilisant les méthodes suivantes :

alignement du texte : centre- En définissant la valeur de la propriété text-align de la balise div parent au centre.marge : auto- En définissant la valeur de la propriété margin sur auto.affichage: flexible- En définissant la valeur de la propriété display sur flex et la valeur de justifier-contenu propriété à centre .affichage : grille- En définissant la valeur de la propriété d'affichage sur la grille.

Comprenons les méthodes ci-dessus en utilisant quelques illustrations.

Exemple

Dans cet exemple, nous utilisons le aligner le texte propriété et définissez sa valeur sur la valeur centre . Il peut être placé soit dans une balise body, soit dans la balise div parent de l'élément.

Ici, nous plaçons le alignement du texte : centre ; dans la balise div parent de l'élément bouton.

 Center align button .container{ text-align: center; border: 7px solid red; width: 300px; height: 200px; padding-top: 100px; } #btn{ font-size: 25px; } Click me 

Sortir

Exemple

Dans cet exemple, nous utilisons le affichage : grille ; propriété, et marge : voiture ; propriété. Ici, nous plaçons le affichage : grille ; dans la balise div parent de l'élément bouton.

commande dans le nœud js

Le bouton sera placé au centre des positions horizontale et verticale.

 Center align button .container { width: 300px; height: 300px; border: 5px solid red; display: grid; } button { background-color: lightblue; color: black; font-size: 25px; margin: auto; } p{ font-size: 25px; } Click me <p>In this example we are using the <b> display: grid; </b> and <b> margin: auto;</b> properties</p> 

Sortir

Exemple

C'est un autre exemple de placement du bouton au centre. Dans cet exemple, nous utilisons le affichage : flexible ; propriété, justifier-contenu : centre ; propriété, et aligner les éléments : centre ; propriété.

Cet exemple nous aidera à placer le bouton au centre des positions horizontale et verticale.

 Center align button .container { width: 300px; height: 300px; border: 5px solid red; display: flex; justify-content: center; align-items: center; } button { background-color: lightblue; color: black; font-size: 25px; } Click me 

Sortir