Centrer un formulaire en HTML

1. Utiliser la propriété CSS margin pour centrer un formulaire en HTML
2. Utilisez la propriété CSS text-align pour centrer un formulaire en HTML
3. Utilisez les propriétés CSS width et margin-left pour centrer un formulaire en HTML

Cet article présentera des méthodes pour centrer un formulaire en HTML.

Utiliser la propriété CSS margin pour centrer un formulaire en HTML

On peut utiliser la propriété CSS margin pour centrer un formulaire en HTML.

Les styles peuvent être écrits sous forme de CSS en ligne dans la balise form. La propriété margin définit l’espace entre le conteneur et les éléments adjacents.

Premièrement, nous pouvons fournir la valeur pour définir une marge pour la propriété. Lorsque nous utilisons une seule valeur, la valeur s’applique aux quatre directions du conteneur.

Ensuite, nous pouvons utiliser la valeur auto de la propriété margin pour centrer le formulaire. Pour cela, il faut prévoir une width de la forme pour qu’elle soit ajustée au centre avec la largeur donnée.

La valeur auto divisera la distance restante également à gauche et à droite.

Par exemple, créez une balise form et écrivez-y l’attribut style. Dans l’attribut style, définissez la propriété margin sur auto et la propriété width sur 220px.

Ensuite, créez une balise input de text et une autre balise input de submit.

L’exemple ci-dessous créera un formulaire centré. Le formulaire a une largeur de 220px, et l’espace restant est divisé en marges gauche et droite.

De cette façon, nous pouvons créer un formulaire avec un alignement central avec margin:auto en utilisant CSS en HTML.

Exemple de code :

<form style="margin: auto; width: 220px;">
    Enter name:<input type="text" />
    <input type="submit" value="Submit"/>
</form>

Utilisez la propriété CSS text-align pour centrer un formulaire en HTML

Nous utilisons la propriété text-align pour spécifier l’alignement du texte en CSS. Nous pouvons utiliser la propriété comme style en ligne de la balise form pour définir l’alignement du formulaire.

La propriété text-align prend les valeurs suivantes : left, right, center, justify, etc. Nous pouvons définir la valeur sur center pour centrer le formulaire.

Par exemple, appliquez la propriété text-align à la balise form dans l’attribut style et définissez la propriété sur center. Ensuite, créez des balises input avec le type text et ensuite submit.

L’exemple ci-dessous centrera tout le contenu du formulaire. Cependant, le formulaire occupe tout le bloc car aucune marge n’a été spécifiée.

De cette façon, nous pouvons centrer le formulaire en HTML.

Exemple de code :

<form style="text-align: center; ">
    Enter name:<input type="text"/> <br><br>
    <input type="submit" value="Submit"/>
</form>

Utilisez les propriétés CSS width et margin-left pour centrer un formulaire en HTML

Nous pouvons définir la largeur du formulaire à 50 % de la largeur de la fenêtre, puis nous pouvons fournir 25 % de la largeur comme marge à gauche. Nous pouvons utiliser les propriétés CSS width et margin-left pour définir la largeur et la marge et atteindre notre objectif.

Enfin, nous pouvons utiliser l’unité vw pour spécifier la longueur. Par exemple, définissez width sur 50vw et margin-left sur 25vw comme attribut style de la balise form.

Ici, la valeur 50vw occupera 50% de la largeur de la fenêtre et la valeur 25vw donnera 25% de la largeur de la fenêtre comme marge de gauche. Les 25% restants seront à droite du formulaire.

De cette façon, nous pouvons centrer un formulaire en HTML.

Exemple de code :

<form style=" width: 50vw; margin-left : 25vw;">
    Enter name:<input type="text"/> <br><br>
    <input type="submit" value="Submit"/>
</form>