Dans HTML, les champs d'entrée sont utilisés pour créer des formulaires. Cela vous permet d'obtenir des commentaires de l'utilisateur, comme le nom, l'adresse et le numéro de téléphone. Dans CSS, vous pouvez styliser les champs d'entrée de différentes manières, comme modifier la couleur du champ de saisie, redimensionner, ajouter des frontières et centrer. Plus précisément, il existe différentes méthodes pour aligner le champ de saisie, y compris la gauche, la droite, le centre, le haut et le bas.

Dans cet article, nous apprendrons à centrer le champ de saisie en utilisant trois méthodes différentes dans CSS, qui sont:

• Centrer un champ de saisie en utilisant "alignement de texte"
• Centrer un champ de saisie en utilisant "marge"
• Centrer un champ de saisie en utilisant "grille"

Afin d'aligner le champ de saisie au centre de l'élément HTML; Tout d'abord, vous devez apprendre la méthode pour créer le champ de saisie, puis le style.

Commençons!

Comment créer un champ d'entrée dans Div en utilisant HTML?

Dans HTML, nous créerons un div et attribuerons la classe "div«Aux

à l'intérieur de la balise. Après cela, créez un sous-div et attribuez le nom de classe comme «saisir»Et un champ de saisie en utilisant la balise; Définissez le type de champ de saisie comme «texte», Et dans l'espace réservé, ajoutez le texte comme«Entrer votre nom". L'ajout disparaîtra lorsqu'un utilisateur tape n'importe quoi dans le champ de saisie

Html

Champ de saisie centrale à l'aide de Text-Align

Dans la sortie ci-dessous, vous pouvez voir que le champ de saisie est créé avec succès dans la div:

Après cela, passez à CSS pour styliser les éléments HTML.

Comment style Div en utilisant CSS?

Dans le fichier CSS, utilisez ".div«Pour accéder à la div créée en HTML. Ensuite, définissez la hauteur de la div comme «250px», Ajoutez une couleur d'arrière-plan comme«RVB (134, 240, 227)»Et réglez la largeur de la frontière comme«10px», Style comme«crête», Et la couleur comme«RVB (2, 141, 127)".

CSS

.div
hauteur: 250px;
Contexte: RVB (134, 240, 227);
Border: 10px Ridge RVB (2, 141, 127);

Sortir

Maintenant, nous allons vérifier différentes méthodes pour aligner un champ de saisie à l'aide de CSS.

Méthode 1: Comment centrer un champ de saisie à l'aide de «Text-Align»?

Afin de centrer le champ d'entrée, nous utiliserons le «alignement de texte»Propriété de CSS. Il est utilisé pour définir l'alignement horizontal du texte dans les éléments HTML tels que gauche, droite, centre et justifier.

Syntaxe

La syntaxe de la propriété Text-Align est:

Texte-aligne: Gauche | Droite | Centre | Justifier

La description de la syntaxe ci-dessus est donnée ci-dessous:

• gauche: Il s'agit de la valeur par défaut de la propriété Text-Align utilisée pour définir le texte sur le côté gauche de l'élément HTML.
• droite: Il est utilisé pour aligner le texte sur le côté droit.
• centre: Il spécifie l'alignement central du texte.
• justifier: En l'utilisant, les mots sont répartis sur une ligne complète.

Continuons l'exemple et alignons le champ de saisie au centre de la div.

Exemple

Ici, nous utiliserons le «.saisir«Pour accéder au sous-div dans lequel le champ de saisie est créé. Après cela, nous définirons la valeur de la propriété Text-Align comme «centre«Pour centrer le champ de saisie:

.saisir
Texte-aligne: Centre;

L'image suivante montre que le champ de saisie est aligné au centre de la div:

Méthode 2: Comment centrer un champ de saisie en utilisant la «marge»?

Pour créer une zone transparente autour d'un élément, le «marge»La propriété du CSS est utilisée. Cette propriété vous permet de régler la marge d'un élément des côtés gauche, droit, supérieur et inférieur. Il s'agit également d'une propriété raccourci des propriétés de marge-fond, de marge, de marge droite et de marge à gauche. En une seule ligne, vous pouvez définir les quatre valeurs.

Syntaxe

La syntaxe de la propriété de marge est donnée ci-dessous:

marge: longueur | Auto

Le "longueur" et "auto«Sont les valeurs de la propriété de marge utilisée pour:

• longueur: Il est utilisé pour définir la marge manuellement.
• auto: Il permet au navigateur de régler la marge autour d'un élément tout seul.

Continuons l'exemple et centrons le champ de saisie.

Exemple

Considérez l'exemple précédent et modifiez le style de la bordure à l'aide de la propriété de la frontière. Après cela, à l'intérieur du «saisir”Classe, utilisez la propriété de marge pour centrer le champ de saisie. Définissez la valeur de la marge comme «auto"Et affichez-le comme"bloc”Pour centrer le champ de saisie. Ici, nous avons utilisé la valeur de la propriété d'affichage comme un bloc car il permet à un élément d'afficher dans un bloc et de prendre toute la largeur de la ligne:

saisir
marge: auto;
bloc de visualisation;

En utilisant le code ci-dessus, la sortie suivante est obtenue:

Après la mise en œuvre réussie de la deuxième méthode, nous passerons à la troisième méthode.

Méthode 3: Comment centrer un champ de saisie à l'aide de «Grid»?

Pour centrer le champ de saisie, nous utiliserons la propriété d'affichage et définirons ses valeurs comme «grille". Il permet à un élément de s'afficher dans un conteneur de grille.

Syntaxe

La syntaxe de la propriété d'affichage est:

Affichage: grille;

À la suite de l'exemple précédent, le centre alignons le champ de saisie.

Exemple

Utilisez le ".saisir”Pour accéder au sous-div dans lequel le champ de saisie est créé et définir la valeur de la propriété d'affichage comme«grille”Pour le régler dans un récipient de grille. Après cela, définissez le conteneur de la grille dans le «centre”Du div en utilisant la propriété Justify-Content:

.saisir
Affichage: grille;
Justification-contenu: centre;

La sortie donnée signifie que le champ de saisie est aligné au centre de la div:

C'est ça! Nous avons expliqué la méthode de centrage d'un champ de saisie en utilisant CSS.

Conclusion

Les champs d'entrée sont placés au centre de la div en utilisant trois méthodes différentes de CSS, qui sont les «grille«Valeurs de la propriété d'affichage, le«alignement de texte", et "marge" propriétés. Ces propriétés vous permettent d'ajuster les éléments conformément à vos exigences. Dans ce guide, nous avons discuté de trois méthodes pour ajuster le champ de saisie au centre.