CSS Absolutes Positionszentrum
Beispiel Nr. 1: Absolutes Positionszentrum horizontal
Wir werden all diese Beispiele in Visual Studio Code machen. Wir müssen die HTML -Datei in unserem Visual Studio -Code erstellen und den Code darauf schreiben. Nach Abschluss des im Bild angegebenen Codes müssen Sie diese Datei mit der “speichern.HTML -Dateierweiterung wie eine "HTML" -Datei.
Erwähnen Sie den Dokumenttyp "HTML", da wir wissen, dass es sich um einen HTML -Code handelt. Dann öffnen Sie "" und "". Das Meta ist unten definiert, was „charSet = utf-8“ ist, wodurch der Zugriff auf verschiedene Zeichen zugänglich ist. Wir verknüpfen diese aktuelle Datei auch mit der CSS. Für die Beschreibung der Vereinigung ist „rel“ hier; Der Typ ist "Text/CSS" und das "href", in dem wir den Namen der Datei übergeben. Wir verknüpfen die „CentorSyle.CSS “mit dieser aktuellen Datei. Nach dem Schließen des "" werden wir das "" das "" verwenden. Wir haben eine Überschrift in den Körper und eine "Div" -Klasse mit dem Namen "Element". Endlich müssen wir alle Tags nacheinander schließen. Zuerst schließen Sie "Div", "Körper" und dann die "HTML" -Tags.
CSS -Code
Hier ist die CSS -Datei. Wenn Sie diese Datei erstellen, verwenden Sie die “.CSS ”Dateierweiterung wie unsere CSS -Datei. Ich muss daran denken, dass Sie diese Datei mit demselben Namen gespeichert haben, den Sie in Ihrer HTML -Datei erwähnt haben. Jetzt werden wir diese Elementklasse mit verschiedenen Eigenschaften stylen. Ort ".”Und schreiben Sie" Element ", wie es der Name der" Div "-Klasse ist. Wir passen die „Höhe“ und „Breite“ als „100px“ und „200px“ an. Stellen Sie "orange" als Hintergrundfarbe. Und weiß für die Schriftfarbe. Jetzt werden wir die Eigenschaft „Absolute Position“ verwenden. Stellen Sie "Position" als "absolut" fest. Aus dem "linken" ist es "0" und von der "Rechten" wird es als "0" festgelegt. Hier sind die oberen und unteren Ränder "0" und die linke; Rechte Ränder sind „automatisch“. Dieser linke und rechte automatische Rand wird verwendet, sodass es den automatischen Rand benötigt, um die Breite des Objekts zu geben.
Die Ausgabe wird im Browser angezeigt. Drücken Sie „Alt+ B ”auf der HTML -Datei, um die Ausgabe anzuzeigen. Wir fügen auch die Ausgabe des oben genannten HTML- und CSS -Codes unten ein.
Ausgang
Beispiel Nr. 2: Absolutes Positionszentrum vertikal
In diesem Beispiel verwenden wir dieselbe HTML -Datei, die wir im vorherigen Beispiel erstellt haben. Ändern Sie einfach die Überschrift „Absolutes Positionszentrum horizontal“ zu „vertikaler Positionszentrum“.
Hier setzen wir die Farbe des Hintergrunds auf "lila". Wenn wir die absolute Position vertikal zentriert setzen müssen, setzen wir die Position in „Absolut“ ein und erwähnen hier „Top: 0“ und „unten: 0“. Wir setzen auch den Rand für dieses „Auto“ für „Top“ und „unten“. Der Wert "0" ist für "links" und "rechts" festgelegt. Sie können auch die Ausgabe dieses Beispiels überprüfen, die wir unten eingefügt haben.
Ausgang
In dieser Ausgabe wird die Box vertikal mit der Absolute Positionseigenschaft platziert. In diesem Bild zeigt der Raum zwischen dem Text und dem Feld, dass er in der vertikalen Position in der Mitte platziert ist.
Beispiel Nr. 3: Absolutes Positionszentrum sowohl horizontal als auch vertikal
In unserem dritten Beispiel werden wir das Objekt in der absoluten Mittelposition festlegen. Hier zentriert das Objekt aus der vertikalen und auch aus der horizontalen Position. Versuchen wir dieses dritte Beispiel.
Hier ist der Code von Anfang an der gleiche wie in unserem vorherigen Beispiel. Wir haben gerade den Code ein wenig aus dem "" -Tag geändert. Wir erstellen eine Klasse von „DIV“, indem wir „Container“ als Name der Klasse verwenden. Bevor wir dieses "Div" -Tag schließen, erstellen wir eine weitere "Div -Klasse". Diesmal lautet der Name "Daten". Erstellen Sie eine Überschrift mit der “
Tag und schreiben Sie auch einen Absatz in die "" -Tags. Verwenden Sie dann die Schließ -Tags für beide "" -Tags ".
CSS -Code
Öffnen Sie im CSS -Code zunächst die Klammern für den Absatz, der in der Containerklasse geschrieben ist. Die „Höhe“ dieses Behälters lautet "60px" und die "Breite" ist auch "60px". Wir wenden hier die Polsterung als „10px“ an. Hier ist die Textposition "relativ". Wir möchten den Rand um den Container oder die Box zeichnen, damit wir dafür das „Grenz“ -Sturm verwenden. Wir setzen die „Grenze“ als „3px“, der Grenztyp ist „fest“ und die Farbe dieses Randes ist „grün“. Wenn wir dies also auf dem Browser anzeigen, ist der Rand von grüner Farbe, fest und auch von „3px“ -Breit. Wir verwenden „Pink“ als Hintergrundfarbe. Und wählen Sie "schwarz" für die Schriftart. Die Schriftart oder der Text werden also in „schwarz“ Farbe angezeigt. Jetzt verwenden wir hier die Eigenschaft „Absolute Position Center“ und setzt das Objekt und geht in die Mitte des Bildschirms auf.
Ausgang
Beispiel # 4
Hier fügen wir den Code von HTML unten für dieses Beispiel ein. Wir verwenden den obigen Code und erstellen kleinere Änderungen darin. In diesem Beispiel entfernen wir einfach den Absatz- und Div -Datenklassen und erstellen für dieses Beispiel eine andere CSS -Datei.
CSS -Code
Die „Höhe“ des Containers in diesem Beispiel lautet "70px" und "die Breite" "300px". Verwenden Sie die "Position" als "absolut". Jetzt zeichnen wir den Rand, an dem wir seine „Breite“ gleich „4px“ festlegen, der Rand zeigt „solide“, da der Typ dieses Randes als „solide“ ausgewählt wird. Die Farbe ist "schwarz". Stellen Sie dann die Innen -Hintergrundfarbe auf "weiß" ein. Die Textfarbe, die wir hier verwenden, ist „schwarz“. Jetzt platzieren wir die absolute Positionseigenschaft. Unsere obere Marge beträgt „50%“ und auch für den „linken“ Rand. Es stellt das Objekt "50%" von oben und auch von links fest. Wir werden die letzte Eigenschaft nutzen, und dies ist die „Transform“ -Sache. Es transformiert das Objekt nach hinten, die Hälfte seiner Breite und auch der Höhe. Es wird relativ zum Körper des Objekts handeln. Es wird das Objekt „50%“ umgekehrt, um die Hälfte seiner Breite und „50%“ umgekehrt.
Ausgang
Abschluss
In diesem Tutorial haben wir das Konzept des Absolute Positionszentrums in CSS behandelt. Wir haben erklärt, wie das Objekt in getrennten Beispielen vertikal und horizontal zentriert werden kann, und dann haben wir zwei weitere Beispiele bereitgestellt, in denen wir das Objekt sowohl vertikal als auch horizontal gleichzeitig zentriert haben. Wir haben hier in diesem Tutorial vier Beispiele besprochen. Wir haben alle Beispiele durchgeführt und auch die Ausgangscreenshots eingefügt. Sie werden dieses absolute Positionszentrum in CSS nach dem gründlichen Studium dieses Tutorials leicht lernen, und ich hoffe, es wird für Sie sehr nützlich sein, wenn Sie es selbst versuchen.