So richten Sie die Taste am unteren Rand der DIV mit CSS aus?

Um ein klares und symmetrisches Aussehen von Elementen zu erstellen, werden Ausrichtungen auf Webseiten oder Websites verwendet. Mit CSS können Sie HTML -Elemente an verschiedenen Positionen wie Mitte, links, rechts und unten ausrichten. In diesem Handbuch verwendeten wir zwei Methoden, um die Taste am unteren Rand des DIV auszurichten, das heißt:

• • Methode 1: Taste am Ende des Divs mit “ausrichten“Anzeige" Eigentum
  • Methode 2: Taste am Ende des Divs mit “ausrichten“Position" Eigentum

Also lasst uns anfangen!

Methode 1: Taste am unteren Rand der DIV mit der Eigenschaft "Anzeige" ausrichten

In CSS, um die Taste am unteren Rand des DIV auszurichten, den Wert der “Anzeige"Eigenschaft wird als" festgelegt "biegen”. Es hängt von der Ansichtsfenstergröße ab und legt Inhalte oder Elemente entsprechend fest. Der Flex -Wert schafft auch den gleichen Raum zwischen den Elementen, um sicherzustellen, dass sie symmetrisch angeordnet sind.

Syntax

Anzeige: Flex

In der oben gegebenen Syntax, “biegen"Wird als Wert der" angegeben "Anzeige" Eigentum.

Schauen wir uns das Beispiel an, um die Schaltfläche unten mit Flex auszurichten.

Beispiel 1: Taste unten und Mitte von Div ausrichten

In HTML werden wir einen Hauptdiv hinzufügen und den Klassennamen als “zuweisen“divUnd fügen Sie seine Überschrift und einen Sub Div hinzu. Wir werden den Klassennamen als "zuweisen als"Btn”Sub Div und fügen Sie eine Schaltfläche mit dem Tag mit dem Tag hinzu.

Html

Taste unten ausrichten

Taste

Nach Abschluss des HTML -Codes wechseln Sie zum CSS.

Hier werden wir verwenden “.div”Zu Zugang zum Hauptbehälter, den wir in HTML erstellt haben. Dann setzen wir die Höhe des Div als “als"150px"Und setzen Sie den Positionswert als"relativ”. Um die DIV zu stylen, setzen Sie den Rand der Div als “als“2px","solide", Und "RGB (26, 53, 1)"Und die Hintergrundfarbe der Div als" als "RGB (162, 173, 121)”.

CSS

.div
Höhe: 150px;
Position: Relativ;
Grenze: 2px fester RGB (26, 53, 1);
Hintergrundfarbe: RGB (162, 173, 121);

Notiz: Es ist notwendig, die Position und Höhe des DIV einzustellen, um die Taste am unteren Rand des DIV einzustellen.

Dann benutze ".Btn”Zu dem Zugriff auf die im HTML -Abschnitt erstellte Sub -Div. Legen Sie den Wert der Anzeigeeigenschaft als "festbiegenUnd Höhe als "130px”. Setzen Sie danach den Wert von Justify-Incontent und Align-Item als “Center”So setzen Sie die Schaltfläche am unteren Rand des DIV:

.btn
Anzeige: Flex;
Höhe: 130px;
Justify-Content: Center;
Ausrichtung: Zentrum;

Die Ausgabe des oben beschriebenen Codes ist unten angegeben. Hier sehen Sie diese Schaltfläche in der Ausrichtung am unteren Rand des Divs:

Beispiel 2: Ausrichtung der Taste unten links von Div

Um die Taste an der linken unteren Seite des DIV auszurichten, müssen Sie nur den Wert der Eigenschaft der Rechtfertigung von der Mitte zu “ändern“links”:

Justify-Incontent: Left;

Ausgang

Beispiel 3: Taste unten rechts von Div ausrichten

Um die Taste an der rechten unteren Seite der DIV auszurichten, müssen Sie den Wert der Eigenschaft Justify-Content-Eigenschaft von der Mitte zu “ersetzenRechts”:

Rechtfertigungsbekämpfung: Recht;

Ausgang

Wechseln Sie nun zur nächsten Methode, um die Taste am unteren Rand der Div auszurichten.

Methode 2: Taste am Ende des DIV mithilfe der Eigenschaft "Position" ausrichten

Der "PositionDie Eigenschaft wird verwendet, um eine andere Art von Position anzugeben, die für verschiedene HTML -Elemente verwendet wird. Die Syntax der Positionseigenschaft ist unten angegeben.

Syntax

Position: statisch | absolut | fest | relativ

In der obigen erwähnten Syntax werden die folgenden vier Eigenschaften der Positionseigenschaft erwähnt:

• • statisch: Es wird verwendet, um die Position gemäß dem normalen Seitenfluss einzustellen. Diese Positionierungsmethode wird standardmäßig festgelegt.
  • relativ: Es wird verwendet, um die Position eines Elements relativ zum anderen Element festzulegen.
  • absolut: Es wird verwendet, um die Position eines Unterelements basierend auf der Position seines Hauptelements anzupassen.
  • Fest: Es gibt die Position des Elements gemäß seinem Ansichtsfenster an.

Setzen wir das Beispiel fort.

Beispiel 1: Taste unten rechts von Div ausrichten

Wir werden den vorherigen Beispiel für HTML -Code fortsetzen und Div entsprechend Eigenschaften zuweisen:

.div
Position: Relativ;
Grenze: 2px fester RGB (12, 38, 46);
Hintergrundfarbe: RGB (55, 104, 119);
Höhe: 150px;

Danach setzen wir die Positionseigenschaft so ein, dass die Position der Taste festgelegt wird.BtnKlasse, die auf die in HTML erstellte Schaltfläche zugreift. Stellen Sie dann den Wert der Positionseigenschaft als “fest“ fest “absolut"Und setzen Sie den unteren und rechten Rand als"5px" Und "0px”:

.btn
Position: absolut;
unten: 5px;
Rechts: 0px;

Notiz: Für die Hauptdiv haben wir den Wert der Positionseigenschaft als "festgelegt" als "relativ"Und sub div als"absolut”. Zu diesem Zweck gibt die Hauptdiv die Kontrolle, um die Position des Sub -DIV anzupassen. Wenn Sie den Wert der Positionseigenschaft sowohl für Eltern als auch für untergeordnete DIV als relativ festgelegt haben.

Wie Sie in der folgenden Ausgabe sehen können, wird die Schaltfläche in der unteren rechten Ecke des Divs festgelegt:

Beispiel 2: Ausrichtung der Taste unten links von Div

Um die Taste unten links der DIV einzustellen, werden wir die „ersetzen“Rechts”Eigentum mit“links”Und setzen Sie seinen Wert wie folgt:

links: 0px;

Ausgang

Das ist es! Wir haben die Methode zur Ausrichtung der Taste am unteren Rand des DIV mit CSS erklärt.

Notiz: Wir können auch die Taste in der Mitte einstellen, indem wir die Werte an die “geben“linksEigentum manuell, aber wir empfehlen es nicht, da es die Reaktionsfähigkeit der Seite beeinflussen kann.

Abschluss

Der "Anzeige" Und "PositionDie Eigenschaft von CSS wird verwendet, um die Taste am unteren Rand des Divs anzupassen. Legen Sie mit der Position des Positionseigens den Wert der Position auf das übergeordnete Element als "festrelativ"Und Kinderelement als"absolutUnd für die Anzeigeeigenschaft setzen Sie sie auf Wert als "biegen”. In diesem Artikel haben wir die Methode erläutert, um die Schaltfläche am unteren Rand des DIV auszurichten, und verschiedene Beispiele dafür geliefert.