Comment centrer un bouton dans une div en utilisant CSS

Les boutons sont une nécessité pour les applications Web. Ils sont bénéfiques pour déclencher les différentes fonctionnalités ou effectuer des actions importantes. Cependant, si les boutons sont positionnés là où personne ne peut les voir ou ne dérange pas d'eux, ils sont complètement inutiles. Pour éviter de telles choses, nous pouvons placer nos boutons au centre pour les rendre plus visibles pour les utilisateurs.

Cet article montrera comment centrer l'élément bouton dans une div à l'aide de CSS.

Comment centrer un bouton dans une div en utilisant CSS?

Dans CSS, nous utiliserons les propriétés suivantes pour centrer le bouton à l'intérieur d'une div:

• affichage des biens
• Position des biens

Alors, élaborons chacun par un!

Méthode 1: Centre un bouton dans Div à l'aide de la propriété d'affichage CSS

Pour contrôler comment un élément HTML sélectionné se comportera, le «afficher»La propriété est utilisée. Cette propriété est utile pour rendre les éléments flexibles pour les définir dans un endroit spécifique, comme la définition de l'élément au centre, l'affichage de la propriété avec un contenu justifié et des éléments d'alignement peuvent être utilisés.

Prenons un exemple pour reconnaître le fonctionnement de la propriété d'affichage pour centrer le bouton dans l'élément div.

Exemple

Ici, nous avons un bouton à l'intérieur du conteneur sur notre page Web. Alors, positionnons-le au centre:

Dans notre fichier HTML, nous avons spécifié un bouton en utilisant le «”Tag et l'a déclaré à l'intérieur du«". Spécifiez maintenant le div dans les balises.

Html

Mon bouton

Dans le fichier CSS, nous utiliserons le «frontière«Propriété avec la valeur»solide 1.5px», Où solide est le type, et 1.5px est la largeur de la frontière. Maintenant, attribuez une hauteur appropriée à Div en utilisant le «hauteur"Propriété comme"7rem". Le "afficher"La propriété sera utilisée avec la valeur"fléchir«Pour rendre la partie définie flexible.

Dans l'étape suivante, nous alignerons le bouton pour centrer horizontalement et verticalement en utilisant la valeur "centre" pour le "justifier" et "align-items" propriétés.

CSS

div
Border: solide 1.5px;
hauteur: 7rem;
Affichage: flex;
Justification-contenu: centre;
Align-Items: Centre;

Enregistrez le code et exécutez le fichier HTML dans votre navigateur:

Comme vous pouvez le voir, nous avons amené avec succès un bouton à l'intérieur d'une div en utilisant les propriétés CSS.

Méthode 2: Centre un bouton dans Div à l'aide de la propriété de position CSS

Le "position»La propriété est utilisée pour placer des éléments HTML à une position spécifique. La combinaison de cette propriété avec d'autres propriétés CSS aide à atteindre les résultats souhaités gracieusement.

Exemple

Dans l'élément div, nous prendrons la valeur du «alignement de texte«Propriété comme«centre”Pour placer le bouton horizontalement au centre. Pour l'élément bouton, spécifiez le «position«Propriété avec la valeur»relatif» Cela rendra l'élément bouton pour positionner relatif à partir de sa position standard. Ensuite, nous définirons le «haut«Valeur de la propriété à«40%«Pour aligner le bouton au centre verticalement.

CSS

div
Border: solide 1.5px;
hauteur: 7rem;
Texte-aligne: Centre;

bouton
Position: relative;
en haut: 40%;

Sortir

Nous avons expliqué les méthodes les plus faciles pour centrer un bouton à l'intérieur d'une div en utilisant CSS.

Conclusion

Pour centrer un bouton à l'intérieur d'une div, le «afficher" ou "position»La propriété sera utilisée. La propriété Display sera utilisée avec la combinaison d'autres propriétés, telles que les éléments d'alignement et le contenu Justify, pour centrer l'élément bouton. De plus, la propriété de position est utilisée avec le texte et la propriété supérieure pour obtenir le résultat souhaité. Dans cet article, nous avons expliqué comment centrer un élément de bouton dans une div en utilisant CSS.