Zentrieren eines Formulars in HTML

1. Verwenden Sie die CSS-Eigenschaft margin, um ein Formular in HTML zu zentrieren
2. Verwenden Sie die CSS-Eigenschaft text-align, um ein Formular in HTML zu zentrieren
3. Verwenden Sie die CSS-Eigenschaften width und margin-left, um ein Formular in HTML zu zentrieren

In diesem Artikel werden Methoden zum Zentrieren eines Formulars in HTML vorgestellt.

Verwenden Sie die CSS-Eigenschaft margin, um ein Formular in HTML zu zentrieren

Wir können die CSS-Eigenschaft margin verwenden, um ein Formular in HTML zu zentrieren.

Die Styles können als Inline-CSS in das form-Tag geschrieben werden. Die Eigenschaft margin definiert den Abstand zwischen dem Container und den angrenzenden Elementen.

Zuerst können wir den Wert angeben, um eine Marge für die Eigenschaft festzulegen. Wenn wir einen einzelnen Wert verwenden, gilt der Wert für alle vier Richtungen des Containers.

Als nächstes können wir den Wert auto für die Eigenschaft margin verwenden, um das Formular zu zentrieren. Dazu sollten wir eine width des Formulars angeben, damit es in der Mitte mit der angegebenen Breite angepasst wird.

Der Wert auto teilt die verbleibende Distanz gleichmässig von links und rechts auf.

Erstellen Sie beispielsweise ein form-Tag und schreiben Sie das style-Attribut hinein. Setzen Sie im style-Attribut die Eigenschaft margin auf auto und die Eigenschaft width auf 220px.

Als nächstes erstellen Sie ein input-Tag von text und ein weiteres input-Tag von submit.

Im folgenden Beispiel wird ein zentriertes Formular erstellt. Das Formular hat eine Breite von 220px, der verbleibende Platz ist in einen linken und rechten Rand unterteilt.

Auf diese Weise können wir ein Formular mit zentrierter Ausrichtung mit margin:auto mit CSS in HTML erstellen.

Beispielcode:

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

Verwenden Sie die CSS-Eigenschaft text-align, um ein Formular in HTML zu zentrieren

Wir verwenden die Eigenschaft text-align, um die Ausrichtung des Textes in CSS festzulegen. Wir können die Eigenschaft als Inline-Stil des form-Tags verwenden, um die Ausrichtung des Formulars festzulegen.

Die Eigenschaft text-align nimmt Werte wie left, right, center, justify usw. an. Wir können den Wert auf center setzen, um das Formular zu zentrieren.

Wenden Sie beispielsweise die Eigenschaft text-align auf das Tag form im Attribut style an und setzen Sie die Eigenschaft auf center. Als nächstes erstellen Sie input-Tags vom Typ text und dann submit.

Im folgenden Beispiel wird der gesamte Inhalt des Formulars zentriert. Das Formular belegt jedoch den gesamten Block, da kein Rand angegeben wurde.

Auf diese Weise können wir das Formular in HTML zentrieren.

Beispielcode:

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

Verwenden Sie die CSS-Eigenschaften width und margin-left, um ein Formular in HTML zu zentrieren

Wir können die Breite des Formulars auf 50 % der Breite des Ansichtsfensters festlegen und dann 25 % der Breite als Rand nach links bereitstellen. Wir können die CSS-Eigenschaften width und margin-left verwenden, um die Breite und den Rand festzulegen und unser Ziel zu erreichen.

Schließlich können wir mit der Einheit vw die Länge angeben. Setzen Sie beispielsweise width auf 50vw und margin-left auf 25vw als style-Attribut des form-Tags.

Hier nimmt der Wert 50vw 50% der Viewport-Breite ein und der Wert 25vw gibt 25% der Viewport-Breite als linken Rand an. Die verbleibenden 25 % des Platzes befinden sich auf der rechten Seite des Formulars.

Auf diese Weise können wir ein Formular in HTML zentrieren.

Beispielcode:

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