Le HTML ""Est un élément activé par l'utilisateur qui effectue une action en clic. Il s'agit d'un composant clé des formulaires Web qui sont généralement utilisés pour soumettre le formulaire. De plus, il est également utilisé pour passer à une autre page, intégrer des images clickables et effectuer d'autres opérations requises. Les utilisateurs peuvent également appliquer les propriétés CSS pour styliser le bouton, comme l'alignement des bouton dans toutes les directions, l'effet de survol, la bordure, etc.

Ce tutoriel examinera:

• Comment faire / créer un bouton dans un «div»?
• Comment centrer un bouton dans un «div»?
• Comment coiffer un bouton dans un «div»?

Comment faire / créer un bouton dans un «div»?

Pour faire un bouton dans un "div»Élément, essayez les instructions données.

Étape 1: Créez un conteneur div

Initialement, utilisez le «”TAG pour créer un"div«Conteneur et attribuez-le un«identifiant" attribut "div".

Étape 2: insérer un titre

Ensuite, insérez une rubrique avec l'aide du «

" étiqueter. Intégrer le texte de cap entre les étiquettes de cap supplémentaires.

Étape 3: Ajoutez un autre conteneur «div»

Ajouter un autre "div"Conteneur avec la classe"BTN-Center".

Étape 4: Création du bouton

Pour créer un bouton, utilisez le «»Tag et spécifiez le«taper«Attribut comme«soumettre". Ensuite, intégrez du texte entre «»Tags qui s'afficheront sur le bouton:

Cliquez sur le bouton Soumettre

Soumettre

On peut remarquer que le bouton a été créé dans le conteneur:

Comment centrer un bouton dans un div?

Pour aligner un bouton au centre dans un "div»Élément, nous avons répertorié certaines méthodes:

• Méthode 1: Centre un bouton dans un «div» à l'aide de la propriété «Affichage»
• Méthode 2: Centre un bouton dans une propriété «Div» à l'aide de «position»
• Méthode 3: Centre un bouton dans un «div» à l'aide de la propriété «Transformer»

Méthode 1: Centre un bouton dans un div à l'aide de la propriété «Afficher»

Les utilisateurs peuvent utiliser le CSS "afficher«Propriété pour centrer le bouton dans un«div". Pour ce faire, essayez les instructions déclarées.

Étape 1: Élément de style «div»

Pour coiffer le "div"Élément, tout d'abord, accédez à lui avec l'aide de l'ID attribué"# Main-DIV", où "#"Est un sélecteur d'identification CSS. Ensuite, appliquez les propriétés CSS suivantes:

# main-div
Border: 3px RVB solide (7, 39, 223);
marge: 20px 50px;
Color en arrière-plan: Aquamarine;
Padding-Bottom: 20px;

Ici:

• "frontière»La propriété est utilisée pour spécifier la frontière autour d'un élément.
• "marge"Attribue l'espace à l'extérieur de la frontière définie.
• "Couleur de l'arrière plan”Est ​​utilisé pour définir la couleur d'arrière-plan de l'élément.
• "rembourrage»Définit un espace à l'intérieur du bouton Element.

Sortir

Étape 2: Centre le bouton dans le conteneur «div»

Maintenant, accédez au bouton en utilisant l'attribut de classe ".BTN-Center". Ensuite, appliquez les propriétés codées ci-dessous:

.Btn-Center
Affichage: flex;
Justification-contenu: centre;
Align-Items: Centre;

Dans l'extrait de code ci-dessus:

• "afficher»La propriété spécifie le comportement d'affichage d'un élément. Par exemple, la valeur de cette propriété est définie comme «fléchir".
• "justifier"Est utilisé pour aligner les éléments du conteneur de manière flexible horizontalement sur l'axe principal.
• "align-items»La propriété est utilisée pour spécifier l'alignement par défaut dans le conteneur de la grille ou flexion pour les éléments.

Sortir

Méthode 2: Centre un bouton dans une div en utilisant la propriété «position»

Pour centrer un bouton en utilisant le "position»Propriété, d'abord, accédez au«div"Conteneur en utilisant l'ID"# Main-DIV»Et appliquez les propriétés CSS mentionnées ci-dessous:

# main-div
hauteur: 150px;
Position: relative;
marge: 20px 70px;
Border: 3px double RVB (3, 39, 243);
Texte-aligne: Centre;

Ici:

• "hauteur»La propriété spécifie la hauteur de l'élément défini.
• "position"Est utilisé pour allouer la position de la méthode à un élément.
• "alignement de texte”Est ​​utilisé pour définir l'alignement du texte.

Sortir

Méthode 3: Centre un bouton dans un «div» à l'aide de la propriété «Transformer»

Pour placer une frontière dans un centre à l'intérieur d'un «div», Utilisez le«transformer»Propriété CSS. Pour ce faire, essayez les instructions données.

Étape 1: En-tête de style

Tout d'abord, accédez à l'en-tête à l'aide du nom de balise "H1»:

H1
Texte-aligne: Centre;

Ensuite, appliquez le «alignement de texte»Propriété pour définir l'alignement du texte au centre.

Étape 2: Centre un bouton dans le conteneur «div»

Ensuite, accédez au second "div"Élément qui contient le bouton à l'aide de la classe attribuée".BTN-Center»Et applique les propriétés données:

.Btn-Center
Position: absolue;
en haut: 50%;
Gauche: 50%;
Transformer: traduire (-50%, -50%);

Ici:

• Le "position«La propriété est définie comme«absolu«Poser l'élément par rapport à l'ancêtre le plus proche.
• "haut" et "gauche»Les propriétés sont utilisées pour régler la position de l'élément depuis les côtés supérieurs et gauche.
• La propriété «transform» est utilisée pour transformer l'élément à l'aide de l'élément «traduire()" méthode. Cette méthode déplace un élément de sa position actuelle en fonction des paramètres fournis avec le "X ”et« y”Axe:

Comment coiffer le bouton dans un «div»?

Pour coiffer le bouton dans un "div"Élément, tout d'abord, accédez au bouton avec le nom de la balise"bouton»Et appliquez les propriétés CSS indiquées:

bouton
hauteur: 50px;
Largeur: 80px;
Border-Radius: 50px;
Couleur: RVB (58, 15, 250);
Caractères gras;
Color en arrière-plan: RVB (235, 193, 9);

La description des propriétés appliquées est la suivante:

• Le "hauteur" et "largeur»Propriétés Définissez la taille de l'élément.
• "rayon frontalier”La propriété crée les coins arronnés de la limite des éléments.
• "couleur"Est utilisé pour spécifier la couleur du texte de l'élément.
• "Police de caractère»Définit l'épaisseur du texte.

On peut observer que le bouton est stylé en fonction des exigences:

Il s'agit de savoir comment centrer le bouton dans un conteneur div.

Conclusion

Pour centrer un bouton dans un "div», Tout d'abord, créez un«”Élément et attribuez-le un"classe" ou "identifiant" attribut. Après cela, faites un bouton en utilisant le "" étiqueter. Ensuite, pour centrer un bouton dans un "div«Élément, accédez d'abord au conteneur et appliquez la propriété CSS»afficher","transformer", ou "position«Pour placer un bouton au centre. Ce tutoriel a expliqué différentes méthodes pour centrer le bouton dans un «div" élément.