In HTML werden Eingabefelder verwendet, um Formulare zu erstellen. Auf diese Weise können Sie Eingaben vom Benutzer abrufen, z. B. Name, Adresse und Telefonnummer. In CSS können Sie die Eingangsfelder auf verschiedene Weise stylen, z. B. die Farbe des Eingangsfeldes, die Größe, das Hinzufügen von Grenzen und Zentrierung. Genauer.

In diesem Artikel lernen wir, wie Sie das Eingabefeld mit drei verschiedenen Methoden in CSS zentrieren, nämlich:

• Zentrieren ein Eingangsfeld mit “Textausrichtung”
• Zentrieren ein Eingangsfeld mit “Rand”
• Zentrieren ein Eingangsfeld mit “Netz”

Um das Eingabefeld in der Mitte des HTML -Elements auszurichten; Zuerst müssen Sie die Methode lernen, um das Eingabefeld zu erstellen und es dann zu stylen.

Lass uns anfangen!

So erstellen Sie ein Eingabefeld in DIV mit HTML?

In HTML erstellen wir eine DIV und weisen die Klasse zu “div”Dazu und fügen Sie eine Überschrift hinzu

im Etikett. Erstellen Sie danach einen Sub -Div und weisen Sie den Klassennamen als “zu" zu "EingangUnd ein Eingangsfeld darin mit dem Tag; Stellen Sie den Typ des Eingabefeldes als “einText”, Und im Platzhalter fügen Sie den Text als" hinzu "hinzu"Eingeben Ihren Namen”. Der hinzugefügte wird verschwinden, wenn ein Benutzer im Feld Eingabebereich irgendetwas eingibt

HTML

Mitteleingangsfeld mit Text-Align

In der folgenden Ausgabe sehen Sie, dass das Eingangsfeld erfolgreich im Div erstellt wurde:

Danach wechseln Sie zu CSS, um die HTML -Elemente zu stylen.

Wie man Div mit CSS stymt?

Verwenden Sie in der CSS -Datei ““.div”Zugriff auf die in HTML erstellte DIV. Stellen Sie dann die Höhe des Div als “ein250px", Fügen Sie eine Hintergrundfarbe als" hinzu "RGB (134, 240, 227)"Und setzen Sie die Grenzbreite als" als "10px", Stil als"Grat", Und Farbe als"RGB (2, 141, 127)”.

CSS

.div
Höhe: 250px;
Hintergrund: RGB (134, 240, 227);
Grenze: 10px Ridge RGB (2, 141, 127);

Ausgang

Jetzt werden wir verschiedene Methoden überprüfen, um ein Eingabefeld mit CSS auszurichten.

Methode 1: So zentrieren Sie ein Eingabefeld mit "Text-Align"?

Um das Eingabefeld zu zentrieren, werden wir die “nutzen“TextausrichtungEigentum von CSS. Es wird verwendet, um die horizontale Ausrichtung des Textes in den HTML.

Syntax

Die Syntax der text-align-Eigenschaft lautet:

Text-Align: links | rechts | Mitte | Rechtfertigung

Die Beschreibung der obigen bereitgestellten Syntax ist unten angegeben:

• links: Es ist der Standardwert der text-align-Eigenschaft, die verwendet wird, um den Text auf der linken Seite des HTML-Elements festzulegen.
• Rechts: Es wird verwendet, um Text auf der rechten Seite auszurichten.
• Center: Es gibt die Mittelausrichtung des Textes an.
• rechtfertigen: Durch die Verwendung werden die Wörter in eine vollständige Linie ausgebreitet.

Setzen wir das Beispiel fort und richten Sie das Eingabefeld in der Mitte des DIV aus.

Beispiel

Hier werden wir das verwenden “.Eingang”Zugriff auf das Sub Div, in dem das Eingabefeld erstellt wird. Danach werden wir den Wert der textausrichtung als "festlegen" festlegen "Center”Um das Eingangsfeld zu zentrieren:

.Eingang
Text-Align: Mitte;

Das folgende Bild zeigt, dass das Eingabefeld in der Mitte des DIV ausgerichtet ist:

Methode 2: So zentrieren Sie ein Eingangsfeld mit "Rand"?

Um einen transparenten Bereich um ein Element zu erstellen, das “RandDas Eigentum des CSS wird verwendet. Mit dieser Eigenschaft können Sie den Rand eines Elements von links, rechts, oben und unteren Seiten einstellen. Es ist auch eine Abkürzungseigenschaft von Rand-, Rand-, Rand- und Marge-Links-Eigenschaften. In einer Zeile können Sie alle vier Werte einstellen.

Syntax

Die Syntax der Margin -Eigenschaft ist unten angegeben:

Rand: Länge | Auto

Der "Länge" Und "Auto”Sind die Werte der Margin -Eigenschaft, die für:

• Länge: Es wird verwendet, um den Rand manuell einzustellen.
• Auto: Der Browser kann den Rand um ein Element selbst umsetzen.

Setzen wir das Beispiel fort und zentrieren Sie das Eingangsfeld.

Beispiel

Betrachten Sie das vorherige Beispiel und ändern Sie den Stil der Grenze mithilfe der Grenzeigenschaft. Danach im Inneren "Eingang”Klasse, verwenden Sie die Margin -Eigenschaft, um das Eingangsfeld auszurichten, um das Eingangsfeld auszurichten. Legen Sie den Wert der Marge als "fest"Auto"Und anzeigen es als"Block”Um das Eingangsfeld zu zentrieren. Hier haben wir den Wert der Anzeigeeigenschaft als Block verwendet, da ein Element in einem Block angezeigt wird und die gesamte Linienbreite einnimmt:

Eingang
Rand: Auto;
Bildschirmsperre;

Mit dem obigen Code wird die folgende Ausgabe erhalten:

Nach der erfolgreichen Implementierung der zweiten Methode wechseln wir zur dritten Methode.

Methode 3: So zentrieren Sie ein Eingabefeld mit "Raster"?

Um das Eingangsfeld zu zentrieren, verwenden wir die Anzeigeeigenschaft und setzen ihre Werte als “festNetz”. Es ermöglicht ein Element, in einem Gitterbehälter anzuzeigen.

Syntax

Die Syntax der Anzeigeeigenschaft lautet:

Anzeige: Grid;

Als Fortsetzung des vorherigen Beispiels richten wir das Zentrum das Eingabefeld aus.

Beispiel

Verwenden Sie die “.Eingang”Zu dem Zugriff auf das Sub Div, in dem das Eingabefeld erstellt wird, und den Wert der Anzeigeeigenschaft als" festlegen "festlegenNetzUm es in einen Gitterbehälter einzustellen. Setzen Sie danach den Gitterbehälter in die “Center”Der DIV unter Verwendung der Anwaltschaftseigenschaft:

.Eingang
Anzeige: Grid;
Justify-Content: Center;

Die angegebene Ausgabe bedeutet, dass das Eingangsfeld in der Mitte des Divs ausgerichtet ist:

Das ist es! Wir haben die Methode zur Zentrierung eines Eingangsfeldes mit CSS erklärt.

Abschluss

Eingabefelder werden in der Mitte des DIV unter Verwendung von drei verschiedenen Methoden von CSS platziert, die die “sindNetzWerte der Anzeigeeigenschaft, die “Textausrichtung", Und "Rand" Eigenschaften. Mit diesen Eigenschaften können Sie die Elemente gemäß Ihren Anforderungen anpassen. In diesem Handbuch haben wir drei Methoden erörtert, um das Eingangsfeld in der Mitte anzupassen.