In diesem Artikel lernen wir, wie Sie das Eingabefeld mit drei verschiedenen Methoden in CSS zentrieren, nämlich:
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
HTML
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
.divAusgang
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 | RechtfertigungDie Beschreibung der obigen bereitgestellten Syntax ist unten angegeben:
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:
.EingangDas 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 | AutoDer "Länge" Und "Auto”Sind die Werte der Margin -Eigenschaft, die für:
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:
EingangMit 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:
.EingangDie 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.